// abstracts/_media-queries.scss

$breakpoint-xs: 320px !default;
$breakpoint-sm: 576px !default;
$breakpoint-md: 768px !default;
$breakpoint-lg: 992px !default;
$breakpoint-xl: 1200px !default;
$breakpoint-xxl: 1366px !default;

$breakpoint-xs-mx-width: 100% !default;
$breakpoint-sm-mx-width: 100% !default;
$breakpoint-md-mx-width: 768px !default;
$breakpoint-lg-mx-width: 992px !default;
$breakpoint-xl-mx-width: 1180px !default;
$breakpoint-xxl-mx-width: 1346px !default;

@mixin responsive-body {
  max-width: $breakpoint-xs-mx-width;
  margin: auto;
  @media (min-width: $breakpoint-sm) {
    max-width: $breakpoint-sm-mx-width;
  }
  @media (min-width: $breakpoint-md) {
    max-width: $breakpoint-md-mx-width;
  }
  @media (min-width: $breakpoint-lg) {
    max-width: $breakpoint-lg-mx-width;
  }
  @media (min-width: $breakpoint-xl) {
    max-width: $breakpoint-xl-mx-width;
  }
  @media (min-width: $breakpoint-xxl) {
    max-width: $breakpoint-xxl-mx-width;
  }
}