.committee-wrapper {
  /* Add any overall padding/margin for the section if needed */
}

.committee-first-row-layout {
  display: grid;
  /* Layout: Slot (2fr) + 4 Members (1fr each) = 5 items, total 6fr effective width */
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

/* .committee-subsequent-rows-layout {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
} */

.committee-subsequent-rows-layout {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
}

.custom-committee-slot {
  background-color: var(--color-black);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 48px;
  /* It will naturally take the 2fr slot in .committee-first-row-layout */
}

.custom-committee-slot .title {
  line-height: 120%;
}

/* Update selectors for .committee-item */
.committee-first-row-layout .committee-item,
.committee-subsequent-rows-layout .committee-item {
  height: 480px;
  background-size: cover;
  background-position: center;
  padding: 24px;
  color: white;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.committee-item p {
  margin: unset;
}

.committee-item h3 {
  margin-top: unset;
  margin-bottom: 8px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* XXL Screens (1800px and up) */
@media (min-width: 1800px) {
}

/* XL Screens (1600px-1799px) */
@media (min-width: 1600px) and (max-width: 1799px) {
}

/* Large Screens (1400px-1599px) */
@media (min-width: 1400px) and (max-width: 1599px) {
}

/* Medium-Large Screens (1200px-1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
}

/* Small-Medium Screens (max-width: 1199px) */
@media (max-width: 1199px) {
}

/* Small Screens (max-width: 992px) */
@media (max-width: 992px) {
  /* Adjust original .committee-wrapper responsive rules if they conflict */
  /*
  .committee-wrapper {
    display: grid; // This might have been here
    grid-template-columns: repeat(2, 1fr); // This might have been here
  }
  */

  .committee-first-row-layout {
    grid-template-columns: 1fr; /* Stack items in the first logical row */
  }

  .custom-committee-slot {
    padding: 24px 12px; /* Adjust padding for smaller screens */
    /* No specific grid-column needed as parent is 1fr */
  }

  .committee-subsequent-rows-layout {
    grid-template-columns: repeat(2, 1fr); /* Two columns for the rest */
  }

  .committee-first-row-layout .committee-item,
  .committee-subsequent-rows-layout .committee-item {
    height: 240px;
    min-height: 200px;
  }

  .committee-subsequent-rows-layout .custom-committee-slot {
    /* display: none; */
  }
}

/* Mobile Screens (max-width: 768px) */
@media (max-width: 768px) {
  .committee-first-row-layout,
  .committee-subsequent-rows-layout {
    grid-template-columns: 1fr; /* Stack all items */
  }
  .custom-committee-slot {
    padding: 20px 10px; /* Further adjust padding for mobile */
  }
  .committee-first-row-layout .committee-item,
  .committee-subsequent-rows-layout .committee-item {
    height: 200px; /* Adjust height for mobile */
    min-height: 180px;
    padding: 16px;
  }

  .committee-subsequent-rows-layout .custom-committee-slot {
    /* display: none; */
  }
}