.z999 { z-index: 999; }
.z9999 { z-index: 9999; }
.z-3 { z-index: -3; }
.z-2 { z-index: -2; }
.z-1 { z-index: -1; }
.z-initial { z-index: initial; }

@each $breakpoint in $breakpoints {
  $bp: nth($breakpoint, 1);
  $letters: nth($breakpoint, 2);

  @media #{$bp} {
    .z999-#{$letters} { z-index: 999; }
    .z9999-#{$letters} { z-index: 9999; }
    .z-3-#{$letters} { z-index: -3; }
    .z-2-#{$letters} { z-index: -2; }
    .z-1-#{$letters} { z-index: -1; }
    .z-initial-#{$letters} { z-index: initial; }
  }
}

@for $i from 0 through 6 {
  .z#{$i} { z-index: #{$i}; }

  @each $breakpoint in $breakpoints {
    $bp: nth($breakpoint, 1);
    $letters: nth($breakpoint, 2);

    @media #{$bp} {
      .z#{$i}-#{$letters} { z-index: #{$i}; }
    }
  }
}