/* 06-components/_feature.css — .c-feature-grid and .c-feature: the catalog. An entry is a 4:3 image in a
   frame, a title and two or three sentences; the grid is three columns from lg, two from sm, one below.
   The frame holds the ratio with CSS so the page does not jump while the image loads. Every image is a
   crop of a real screen; the frame is the mount, not the picture. */
.c-feature-grid { display: grid; gap: var(--space-xl) var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .c-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .c-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.c-feature { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.c-feature__frame { position: relative; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; background: var(--surface-sunken); border: var(--stroke) solid var(--rule); border-radius: var(--radius-md); }
.c-feature__frame picture, .c-feature__frame img { display: block; width: 100%; height: 100%; }
.c-feature__frame img { object-fit: cover; object-position: top left; }
.c-feature__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--ink); }
.c-feature__text { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink-muted); }
/* The section that groups entries under a heading. */
.c-feature-section { display: flex; flex-direction: column; gap: var(--space-lg); }
.c-feature-section__title { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); padding-top: var(--space-lg); border-top: var(--stroke) solid var(--rule); }
.c-feature-section__lede { color: var(--ink-muted); max-width: var(--measure-prose); margin-top: calc(-1 * var(--space-sm)); }