.card-grid {
  padding: 2em 0;
}

.storage--card_grid + .storage--card_grid {
  /* Collapse top margin if sibling grids and no title/subtitle/body is present */
  .card-grid {
    padding: 0 0 2em;
  }
  /* If card grid is in a selector and then has the padding present for title/subtitle/bodycopy, space out from sibling grid */
  .card-grid:has(.ssb-container > .pb-8) {
    padding-top: 2em;
  }
}

@media (min-width: 768px) {
  .card-grid {
    padding: 4em 0;
  }
  .storage--card_grid + .storage--card_grid {
    /* Collapse top margin if sibling grids and no title/subtitle/body is present */
    .card-grid {
      padding: 0 0 4em;
    }
    /* If card grid is in a selector and then has the padding present for title/subtitle/bodycopy, space out from sibling grid */
    .card-grid:has(.ssb-container > .pb-8) {
      padding-top: 4em;
    }
  }
}

.card-grid .media-card-base {
  display: flex;
  height: 100%;
}

.card-grid .media-card {
  margin: 0;
}

.card-grid .media-card-media .field__item {
  height: auto;
}

.card-grid .media-card.media_top .media-card-content {
  padding-top: 0;
}

.card-grid .media-card.media_bottom .media-card-content {
  margin-bottom: auto;
  padding-bottom: 0;
}

:root{
  /* Remember to update these values in the container queries as well - can't use variables in the container query yet! */
  --min-width: 200px;
  --grid-gap: 2rem;
}

.card-grid-container {
  container: grid-wrapper / inline-size;
}

.card-grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(calc((var(--min-width) - var(--grid-gap))/2), calc((100% - var(--grid-gap)) / 2)), 1fr));
  grid-gap: var(--grid-gap);
}

.card-grid-layout-item {
  grid-column: span 2;
}

/* 2 Column Layouts */
@container grid-wrapper (min-width: calc(200px * 2 + 2rem)) and (max-width: calc(200px * 3 + 2rem * 2)) {
  /* Dealing with 1 orphan item */
  .card-grid-layout-item:last-child:nth-child(2n + 1) {
    grid-column-end: 4;
  }
}

/* 3 Column Layouts */
@container grid-wrapper (min-width: calc(200px * 3 + 2rem * 2)) and (max-width: calc(200px * 4 + 2rem * 3 - 1px)) {
  /* Dealing with 1 orphan item */
  .card-grid-layout-item:last-child:nth-child(3n + 1) {
    grid-column-end: 5;
  }
  /* Dealing with 2 orphan items */
  .card-grid-layout-item:nth-last-child(2):nth-child(3n + 1) {
    grid-column-end: 4;
  }
}

/* 4 Column Layouts */
@container grid-wrapper (min-width: calc(200px * 4 + 2rem * 3)) and (max-width: calc(200px * 5 + 2rem * 4 - 1px)) {
  /* Dealing with 1 orphan item */
  .card-grid-layout-item:last-child:nth-child(4n + 1) {
    grid-column-end: 6;
  }
  /* Dealing with 2 orphan items */
  .card-grid-layout-item:nth-last-child(2):nth-child(4n + 1) {
    grid-column-end: 5;
  }
  /* Dealing with 3 orphan items */
  .card-grid-layout-item:nth-last-child(3):nth-child(4n + 1) {
    grid-column-end: 4;
  }
}

/* 5 Column Layouts */
@container grid-wrapper (min-width: calc(200px * 5 + 2rem * 4)) and (max-width: calc(200px * 6 + 2rem * 5 - 1px)) {
  /* Dealing with 1 orphan item */
  .card-grid-layout-item:last-child:nth-child(5n + 1) {
    grid-column-end: 7;
  }
  /* Dealing with 2 orphan items */
  .card-grid-layout-item:nth-last-child(2):nth-child(5n + 1) {
    grid-column-end: 6;
  }
  /* Dealing with 3 orphan items */
  .card-grid-layout-item:nth-last-child(3):nth-child(5n + 1) {
    grid-column-end: 5;
  }
  /* Dealing with 4 orphan items */
  .card-grid-layout-item:nth-last-child(4):nth-child(5n + 1) {
    grid-column-end: 4;
  }
}

/* 6 Column Layouts */
@container grid-wrapper (min-width: calc(200px * 6 + 2rem * 5)) and (max-width: calc(200px * 7 + 2rem * 6 - 1px)) {
  /* Dealing with 1 orphan item */
  .card-grid-layout-item:last-child:nth-child(6n + 1) {
    grid-column-end: 8;
  }
  /* Dealing with 2 orphan items */
  .card-grid-layout-item:nth-last-child(2):nth-child(6n + 1) {
    grid-column-end: 7;
  }
  /* Dealing with 3 orphan items */
  .card-grid-layout-item:nth-last-child(3):nth-child(6n + 1) {
    grid-column-end: 6;
  }
  /* Dealing with 4 orphan items */
  .card-grid-layout-item:nth-last-child(4):nth-child(6n + 1) {
    grid-column-end: 5;
  }
  /* Dealing with 5 orphan items */
  .card-grid-layout-item:nth-last-child(5):nth-child(6n + 1) {
    grid-column-end: 4;
  }
}