Breakpoints

Breakpoint names, modifiers, min widths, design widths and the layout grid per breakpoint.

Breakpoints are mobile first: a modifier applies from its min width upward, and classes without a modifier apply everywhere. The design width is the viewport the design was drawn at; it is --screen-current inside that breakpoint and the basis of the fluid .vw scale (vw-<breakpoint> pins it).

Breakpoint	Modifier	Min width	Design width	Grid columns	Gutter	Container width	Container margin
`sm`	none	`0px`	`390px`	`12`	`16px`	`356px`	`17px`
`md`	`md:`	`640px`	`768px`	`24`	`12px`	`708px`	`30px`
`lg`	`lg:`	`1192px`	`1192px`	`24`	`20px`	`1036px`	`78px`
`xl`	`xl:`	`1366px`	`1440px`	—	—	—	—
`2xl`	`2xl:`	`1728px`	`1920px`	—	—	—	—
`3xl`	`3xl:`	`2048px`	`2560px`	—	—	—	—

xl, 2xl, 3xl have no sizing tokens by default, so they keep the values of the widest sized breakpoint. Define them with customTokens.responsiveSizing to use them.