@each $max-width in $max-widths {
  $max-width-value: strip-unit($max-width);

  .mw-#{$max-width-value} {
    max-width: $max-width;
  }
}

.mw-none {
  max-width: none;
}

.mw-grid {
  max-width: 67.5rem; // 1080px
}

@each $breakpoint-name, $breakpoint-value in $breakpoints {
  @media #{$breakpoint-value} {
    @each $max-width in $max-widths {
      $max-width-value: strip-unit($max-width);

      .#{$breakpoint-name}--mw-#{$max-width-value} {
        max-width: $max-width;
      }
    }

    .#{$breakpoint-name}--mw-none {
      max-width: none;
    }

    .#{$breakpoint-name}--mw-grid {
      max-width: 67.5rem; // 1080px
    }
  }
}