Breakpoints

Fizz uses a mobile-first approach to responsive design. This means that we start with the smallest screen size and work our way up. We use a set of breakpoints inspired by common device resolutions to define the different screen sizes and apply styles accordingly. These are mainly used inside of the component styles to define how they should shift at different screen sizes, but there may be a few cases where you need to use them in your own styles.

See Tokens for implementation and usage.

Token	Minimum width	Mixin	CSS
`$mobile`	375px	`@include mobile`	`@media (min-width: 375px) { ... }`
`$tablet`	700px	`@include tablet`	`@media (min-width: 700px) { ... }`
`$desktop`	1024px	`@include desktop`	`@media (min-width: 1024px) { ... }`
`$max`	1440px	`@include max`	`@media (min-width: 1440px) { ... }`
`$max-with-margin`	1536px	`@include max-with-margin`	`@media (min-width: 1536px) { ... }`

HTML

@import "../../../../node_modules/@getprovi/fizz/src/scss/_tokens/tokens";

.product-listing-container {
margin-inline: $spacing-16; // mobile margin
@include tablet {
margin-inline: $spacing-32; // tablet margin
}
@include desktop {
margin-inline: $spacing-48; // desktop margin
}
@include max-with-margin {
margin-inline: auto; // max-width margin
}
}