@use './variables' as *;

@mixin responsive {
  @each $size-name, $size in $screen-sizes {
    @media screen and (min-width: $size) {
      @content ($size-name);
    }
  }
}

@mixin responsive-steps($from, $to) {
  @include responsive using ($size-name) {
    @for $index from $from through $to {
      @content ($size-name, $index);
    }
  }
}