@use '../breakpoints' as bp;

@mixin respond-up($name) {
  @media (min-width: bp.breakpoint($name)) {
    @content;
  }
}

@mixin respond-down($name) {
  $width: bp.breakpoint($name);
  @media (max-width: ($width - 0.02px)) {
    @content;
  }
}

@mixin respond-between($from, $to) {
  $min: bp.breakpoint($from);
  $max: bp.breakpoint($to);
  @media (min-width: $min) and (max-width: ($max - 0.02px)) {
    @content;
  }
}