/* One card per row, three side by side from the layout breakpoint on, where the design
   turns the column into a row. `gap` carries both drawn distances at once: 24px between
   two stacked cards, the page grid's gutter between three in a row — where a card is four
   of the twelve columns. */
.engagement {
    display: grid;
    gap: 1.5rem var(--sav-grid-gutter);

    /* Only the block margin, so the content band keeps centring the block. */
    margin-block: 0;

    /* The distance the design draws from the section title down to the cards, 32px → 48px.
       It collapses with what the title keeps below itself, so the drawn distance is what
       stands there — and nothing is kept where the cards open the content. */
    * + & {
        margin-block-start: clamp(2rem, 2rem + (100vw - 24.375rem) * 0.011958, 3rem);
    }

    @media (min-width: 64rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}