@use '../../variables/breakpoints/variables' as *;

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

@mixin md {
  @media (min-width: #{$sm + 1px}) and (max-width: #{$md}) {
    @content;
  }
}

@mixin lg {
  @media (min-width: #{$md + 1px}) and (max-width: #{$lg}) {
    @content;
  }
}

@mixin breakpoint($bp: 0) {
  @media (min-width: $bp) {
    @content;
  }
}