/*
 * Breakpoints
 */

$breakpoint-xl: 1200px;
$breakpoint-lg: 991px;
$breakpoint-md: 768px;
$breakpoint-sm: 390px;

@mixin xl {
  @media (max-width: #{$breakpoint-xl}) {
    @content;
  }
}

@mixin lg {
  @media (max-width: #{$breakpoint-lg}) {
    @content;
  }
}

@mixin md {
  @media (max-width: #{$breakpoint-md}) {
    @content;
  }
}

@mixin sm {
  @media (max-width: #{$breakpoint-sm}) {
    @content;
  }
}
