@layer components {
    .how-it-works {
        padding-block: var(--space-xl);
        padding-inline: var(--space-s);

        /* 2×2 tiles, not a 4-across strip: four columns inside 68rem left each step barely
           wider than its own heading, so the descriptions wrapped into tall slivers. The track
           minimum (20rem) against the 52rem container is what caps it at two columns — no media
           query needed, and it still collapses to a single column on a phone. */
        & .how-it-works__steps {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
            gap: var(--space-m);
            max-width: 52rem;
            margin-inline: auto;
            margin-block-start: var(--space-l);
        }
    }
}