Commonly used for sizing containers (e.g. max-width). See below for media query usage.
--p-breakpoints-sm
30.625rem
Set frame width to 490+ pixels
Commonly used for sizing containers (e.g. max-width). See below for media query usage.
--p-breakpoints-md
48rem
Set frame width to 768+ pixels
Commonly used for sizing containers (e.g. max-width). See below for media query usage.
--p-breakpoints-lg
65rem
Set frame width to 1040+ pixels
Commonly used for sizing containers (e.g. max-width). See below for media query usage.
--p-breakpoints-xl
90rem
Set frame width to 1440+ pixels
Commonly used for sizing containers (e.g. max-width). See below for media query usage.
Usage in Media Queries
Sass variables
A transform takes the above values and generates Sass variables (which can be
used in media conditions) for each breakpoint in up, down, and only directions.
While we currently support down media conditions, we encourage developers to
adopt a mobile first strategy and use up wherever possible.