$point-unit: 8px !default;
// Point-Grid System
// Use multiples of this value to define dimensions, padding, and margin of both block and inline elements.
// Learn more here: https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632

$spacing-data: (
  none: 0,
  xxs: rem($point-unit / 2),
  // 4px
  xs: rem($point-unit),
  // 8px
  s: rem($point-unit * 2),
  // 16px
  m: rem($point-unit * 3),
  // 24px
  l: rem($point-unit * 4),
  // 32px
  xl: rem($point-unit * 6),
  // 48px
  xxl: rem($point-unit * 8) // 64px,,,,,,,
) !default;

/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.
/// @type Map
$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
) !default;

// Small devices
@mixin sm {
  @media (max-width: 32rem) {
    @content;
  }
}
// Medium devices
@mixin md {
  @media (max-width: 48rem) {
    @content;
  }
  @media only screen and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
    @content;
  }
  @media only screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    @content;
  }
  @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {
    @content;
  }
  @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
    @content;
  }
  @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {
    @content;
  }
  @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
    @content;
  }
  @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {
    @content;
  }
}
// Large devices
@mixin lg {
  @media (max-width: 64rem) {
    @content;
  }
}