Breakpoints

Responsive breakpoints for mobile and desktop layouts.

Responsive breakpoints define when the layout switches between mobile and desktop configurations.

--breakpoint-mobile-max

1023px

--breakpoint-desktop-min

1024px

Usage

Mobile (0px – 1023px)

Uses --grid-*-mobile tokens

4 columns, 20px margins

Desktop (1024px+)

Uses --grid-*-desktop tokens

12 columns, 32px gutters