Responsive layout, breakpoints and grids.
Responsive tokens define breakpoints and media queries. They are based on screen size, not device type. Therefore, a mobile device or tablet will change layout based on breakpoints.
|mediaQueries.smallAndUp||@media screen and (min-width: breakpoints.small)|
|mediaQueries.mediumAndUp||@media screen and (min-width: breakpoints.medium)|
|mediaQueries.largeAndUp||@media screen and (min-width: breakpoints.large)|