.i { font-style: italic; }
.fs-normal { font-style: normal; }
.no-decoration { text-decoration: none; }
.u { text-decoration: underline; }
.underline { text-decoration: underline; }
.overline { text-decoration: overline; }
.line-through { text-decoration: line-through; }
.b { font-weight: bold; }
.bolder { font-weight: bolder; }
.lighter { font-weight: lighter; }
.fw-normal { font-weight: normal; }

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

  @media #{$bp} {
    .i-#{$letters} { font-style: italic; }
    .fs-normal-#{$letters} { font-style: normal; }
    .no-decoration-#{$letters} { text-decoration: none; }
    .u-#{$letters} { text-decoration: underline; }
    .underline-#{$letters} { text-decoration: underline; }
    .overline-#{$letters} { text-decoration: overline; }
    .line-through-#{$letters} { text-decoration: line-through; }
    .b-#{$letters} { font-weight: bold; }
    .bolder-#{$letters} { font-weight: bolder; }
    .lighter-#{$letters} { font-weight: lighter; }
    .fw-normal-#{$letters} { font-weight: normal; }
  }
}

@for $i from 1 through 9 {
  $num: $i * 100;
  .fw#{$i} { font-weight: #{$num} }

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

    @media #{$bp} {
      .fw#{$i}-#{$letters} { font-weight: #{$num} }
    }
  }
}