.card-grid {
  --grid-cols: var(--card-grid-columns-small);
  margin: var(--space-96) var(--side-spacing);
}
main > .card-grid:last-child {
  -webkit-margin-after: var(--space-96);
  margin-block-end: var(--space-96);
}
.card-grid__cards {
  -moz-column-gap: var(--grid-gap);
  column-gap: var(--grid-gap);
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  row-gap: var(--space-48);
}
@media screen and (prefers-reduced-motion: no-preference) {
  .card-grid:not(.no-hover) .card-grid__cards--dim .card-grid__card-container {
    transition: opacity 0.25s;
  }
  .card-grid:not(.no-hover)
    .card-grid__cards--dim:hover
    .card-grid__card-container {
    opacity: 0.5;
  }
  .card-grid:not(.no-hover)
    .card-grid__cards--dim
    .card-grid__card-container:hover {
    opacity: 1;
  }
}
.card-grid > h2 {
  -webkit-margin-after: var(--space-32);
  margin-block-end: var(--space-32);
}
.card-grid--nested {
  margin: 0;
}
.card-grid--shrink-space {
  -webkit-margin-before: 0;
  margin-block-start: 0;
}
@media (min-width: 40rem) {
  .card-grid {
    --grid-cols: var(--card-grid-columns-medium);
  }
}
@media (min-width: 64rem) {
  .card-grid {
    --grid-cols: var(--card-grid-columns-large);
    -webkit-margin-after: var(--space-32);
    margin-block-end: var(--space-32);
  }
  .card-grid__cards {
    row-gap: var(--space-64);
  }
}
@media (min-width: 90rem) {
  .card-grid {
    --grid-cols: var(--card-grid-columns-xlarge);
  }
}
@media (min-width: 120rem) {
  .card-grid {
    --grid-cols: var(--card-grid-columns-max);
  }
}