/* Section "cards": a heading and a row of cards, each with an illustration, title and text. */

.cards { padding-block: var(--section-gap) var(--section-gap-s); }
/* the heading sits centred above the row of cards */
.cards .section-head { text-align: center; margin-inline: auto; }
.cards__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.cards__item { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; padding-bottom: var(--space-lg); overflow: clip; background: var(--color-paper-2); color: var(--color-ink); border-radius: var(--radius-card); }
.cards__art { width: 100%; height: auto; aspect-ratio: 16 / 10; margin-bottom: var(--space-sm); }
.cards__title { padding-inline: var(--space-lg); color: var(--color-ink); font-family: var(--font-body); font-weight: 800; font-stretch: var(--wdth-wide); font-size: var(--type-title); line-height: var(--leading-tight); }
.cards__text { padding-inline: var(--space-lg); color: var(--color-ink-2); }
@media (max-width: 64rem) { .cards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .cards__list { grid-template-columns: minmax(0, 1fr); } }