@containerThe same .card component, unmodified, in three containers of different widths on one page. Each stacks or goes horizontal purely from its own container's width crossing @container (min-width: 400px) - not the page's.
container-type: inline-size; width: 220px
Narrower than 400px, so the card stays a column.
container-type: inline-size; width: 500px
500px crosses the 400px breakpoint, so the same rule flips this card to a row.
container-type: inline-size; width: 320px
320px is still under 400px, so this one stays stacked too - despite being on the exact same page as the 500px one above.