@mixin fix {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@mixin flex(
  $align-items: "",
  $justify-content: "",
  $flex-wrap: "",
  $flex-direction: ""
) {
  display: flex;
  @if $align-items != "" {
    align-items: $align-items;
  }
  @if $justify-content != "" {
    justify-content: $justify-content;
  }
  @if $flex-wrap != "" {
    flex-wrap: $flex-wrap;
  }
  @if $flex-direction != "" {
    flex-direction: $flex-direction;
  }
}

@mixin media($type: "min", $size: 0px) {
  @media only screen and (#{$type}-width: $size) {
    @content;
  }
}

@mixin xxl {
  @include media("max", 1600px) {
    @content;
  }
}

@mixin xl {
  @include media("max", 1399px) {
    @content;
  }
}

@mixin lg {
  @include media("max", 1199px) {
    @content;
  }
}

@mixin md {
  @include media("max", 991px) {
    @content;
  }
}

@mixin sm {
  @include media("max", 767px) {
    @content;
  }
}

@mixin xs {
  @include media("max", 575px) {
    @content;
  }
}