// @mixin breakpoint($class) {
//   @if $class == xs {
//     @media (max-width: 767px) { @content; }
//   }
 
//   @else if $class == sm {
//     @media (min-width: 768px) { @content; }
//   }
 
//   @else if $class == lg {
//     @media (min-width: 992px) { @content; }
//   }
 
//   @else if $class == lg {
//     @media (min-width: 1200px) { @content; }
//   }
 
//   @else if $class == xl {
//     @media (min-width: 1200px) { @content; }
//   }
 
//   @else {
//     @warn "Breakpoint mixin supports: xs, sm, md, lg";
//   }
// }

$breakpoints: (
  xs: 24rem,
  sm: 600px,
  md: 768px,
  lg: 1200px,
  xl: 1400px
);

// mobile-first breakpoint mixin
@mixin breakpoint($breakpoint: md, $key: min, $orientation: false) {
  @if ($orientation) {
    @media (#{$key}-width: map-get($breakpoints, $breakpoint)) and (orientation : $orientation) {
      @content;
    }
  } @else {
    @media (#{$key}-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  }
}