/* fix-grid.css */

/* Ensure the container has a defined width and no interfering styles */

.projects-list {
  display: block !important; /* Disable CSS Grid */
  width: 100% !important; /* Ensure full width */
  max-width: 1450px; /* Adjust based on your design */
  margin: 0 auto; /* Center the container */
  padding: 0 !important; /* Remove any padding */
  box-sizing: border-box;
  min-height: 570px; /* Reserve space for one row of items */
}

/* Adjust work-item width to account for gutter */
.work-item {
  position: absolute !important;
  width: calc(33.333% - 20px); /* Subtract (2/3 of gutter) to account for spacing */
  margin-bottom: 30px; /* Vertical gap */
  box-sizing: border-box;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .work-item {
      width: calc(50% - 15px); /* 2 columns, adjust for gutter */
  }
}

@media (max-width: 576px) {
  .work-item {
      width: 100%; /* 1 column */
  }
}

/* Normalize heights for consistent layout */
.work-item .img-next-box {
  height: 400px !important; /* Fixed height for images */
  overflow: hidden;
}

.work-item .img-next-box img.cover-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-item .box-content {
  min-height: 120px !important;
}

.work-item .title-block {
  min-height: 80px !important;
}