// Breakpoints and viewports for a responsive website.
// Taken from Pico CSS, see here:
// https://github.com/picocss/pico/blob/v1.5.11/scss/_variables.scss#L38

// xs: Extra small (portrait phones)
// sm: Small(landscape phones)
// md: Medium(tablets)
// lg: Large(desktops)
// xl: Extra large (large desktops)

// NOTE:
// To provide an easy and fine styling on each breakpoint
// we didn't use @each, @mixin or @include.
// That means you need to edit each CSS selector file to add a breakpoint

// Breakpoints
// 'null' disable the breakpoint
$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
) !default;

// Viewports
$viewports: (
  // 'null' disable the viewport on a breakpoint
  sm: 510px,
  md: 700px,
  lg: 920px,
  xl: 1130px
) !default;