Grid

12-column flexible grid scoped by --layout-max-w with --layout-gutter spacing. Mobile-first: layouts start single-column and opt INTO multi-column via min-width queries.

12-column overlay

Real layout — main + aside

Main content area

Spans flexibly — fills whatever the side panel doesn't claim.

Side panel

Fixed 280px on desktop; stacks below main on mobile.

Breakpoints

TokenWidthUsed for
sm≥ 480pxLarge phone, two-up grids
md≥ 768pxTablet, side panels appear
lg≥ 1024pxDesktop
xl≥ 1280pxWide desktop, dual-aside layouts