// Breakpoints
$breakpoint-s: 'screen and (min-width: 30rem)';     // ~ phone, 480px
$breakpoint-m: 'screen and (min-width: 45rem)';     // ~ tablet, 720px
$breakpoint-l: 'screen and (min-width: 60rem)';     // ~ laptop, 960px
$breakpoint-xl: 'screen and (min-width: 67.5rem)';  // ~ monitor, 1080px

$breakpoints: (
  s: $breakpoint-s,
  m: $breakpoint-m,
  l: $breakpoint-l,
  xl: $breakpoint-xl
);