@import "variables";

@mixin xs {
  @media (max-width: #{$flexi-max-width-xs - 1px}) {
    @content;
  }
}
@mixin sm {
  @media (min-width: #{$flexi-max-width-xs}) and (max-width: #{$flexi-max-width-sm - 1px}) {
    @content;
  }
}
@mixin md {
  @media (min-width: #{$flexi-max-width-sm}) and (max-width: #{$flexi-max-width-md - 1px}) {
    @content;
  }
}
@mixin lg {
  @media (min-width: #{$flexi-max-width-md}) and (max-width: #{$flexi-max-width-lg - 1px}) {
    @content;
  }
}
@mixin xl {
  @media (min-width: #{$flexi-max-width-lg}) and (max-width: #{$flexi-max-width-xl - 1px}) {
    @content;
  }
}
@mixin xxl {
  @media (min-width: #{$flexi-max-width-xl}) {
    @content;
  }
}