Comment by dmix

TIL about CSS Container Queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Contain...

That technique of using a style tag to set a CSS var (--horizontal) then using @container tags to shift the UI is really cool.

    <div class="c-newspaper__item" style="--horizontal: true;">
        <article class="c-card"></article>
    </div>

    .c-newspaper__item {
        container-type: inline-size;
        container-name: card;
    }

    @container card (min-width: 300px) and style(--horizontal: true) {
        .c-card {
            display: flex;
            gap: 1rem;
        }
    }

Also, as someone who learned CSS in the early 2000s, seeing grid layouts with `grid-template-columns:` etc make life so much easier. Web devs have it easier these days.