Switcher
Use .switcher for a small set of peer regions that should switch together
between one row and a vertical stack. Unlike .grid, it never produces a
partial row such as two items followed by one orphan.
Profile
Personal details.
Security
Login settings.
Billing
Payment details.
<section class="switcher">
<article class="card"><h3>Profile</h3><p>Personal details.</p></article>
<article class="card"><h3>Security</h3><p>Login settings.</p></article>
<article class="card"><h3>Billing</h3><p>Payment details.</p></article>
</section>Use .grid instead for repeatable collections whose items can reflow
independently.
Hooks
--switcher-thresholdcontrols the space needed before all peers share a row. The children read it, so it also reaches the children of a nested switcher; set it on the nested switcher to give it its own threshold.