/* Breakpoints
 *
 * Important: Remember to keep Sass breakpoints in sync with Tailwind
 * breakpoints in tailwind.config.js!
 *
 * Mappy Breakpoints expects breakpoints in `px` and does automatic
 * conversion to `em` while Tailwind uses the configured values literally.
 */

$breakpoints: (
    'xxs': 360px,   // 22.5rem
    'xs': 480px,    // 30em
    'sm': 640px,    // 40em
    'md': 768px,    // 48em
    'lg': 992px,    // 62em
    'xl': 1200px,   // 75em
);

// Only use with a min-width mediaquery (the norm).
$mediaquery-xxs: 22.5rem;   // 360px
$mediaquery-xs: 30em;       // 480px
$mediaquery-sm: 40em;       // 640px
$mediaquery-md: 48em;       // 768px
$mediaquery-lg: 62em;       // 991px
$mediaquery-xl: 75em;       // 1200px

// Only use with a max-width mediaquery.
$mediaquery-xxs-max: 22.4375rem;    // 359px
$mediaquery-xs-max: 29.9375em;      // 479px
$mediaquery-sm-max: 39.9375em;      // 639px
$mediaquery-md-max: 47.9375em;      // 767px
$mediaquery-lg-max: 61.9375em;      // 991px
$mediaquery-xl-max: 74.9375em;      // 1199px
