@use '../abstracts/variables' as variables;
// MEDIA QUERIES
@mixin media-xs {
  @media only screen and (max-width: variables.$screen-xs) {
    @content;
  }
}

@mixin media-sm {
  @media only screen and (max-width: variables.$screen-sm) {
    @content;
  }
}

@mixin media-md {
  @media only screen and (max-width: variables.$screen-md) {
    @content;
  }
}

@mixin media-lg {
  @media only screen and (max-width: variables.$screen-lg) {
    @content;
  }
}

@mixin media-xgl {
  @media only screen and (max-width: variables.$screen-xgl) {
    @content;
  }
}

@mixin media-xl {
  @media only screen and (max-width: variables.$screen-xl) {
    @content;
  }
}

@mixin media-xxl {
  @media only screen and (max-width: variables.$screen-xxl) {
    @content;
  }
}

@mixin media-xxxl {
  @media only screen and (max-width: variables.$screen-xxl) {
    @content;
  }
}

@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  max-width: 1496px;
  margin-right: auto;
  margin-left: auto;

  @include media-xl {
    padding: 0 $padding-x;
  }
}

@mixin container() {
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;

  @include media-sm {
    padding: 0 30px;
  }

  @include media-lg {
    padding: 0 45px;
  }
}