/*------------------------------------
  Widths
------------------------------------*/

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    $i: 20;
    @while $i < 91 {
      .g-width-#{$i}x#{$infix} {
        width: $i * 1% !important;
      }
      $i: $i + 5;
    }
    .g-width-33_3x#{$infix} {
      width: 33.333333% !important;
    }
    .g-width-16_6x#{$infix} {
      width: 16.666666% !important;
    }
    .g-width-66_6x#{$infix} {
      width: 66.666666% !important;
    }

    $i: 10;
    @while $i<51 {
      .g-width-#{$i}#{$infix} {
        width: #{$i}px !important;
      }
      $i: $i + 2;
    }

    $i: 50;

    @while $i<250 {
      .g-width-#{$i}#{$infix} {
        width: #{$i}px !important;
      }
      $i: $i + 10;
    }
    $i: 260;

    @while $i<1081 {
      .g-width-#{$i}#{$infix} {
        width: #{$i}px !important;
      }
      $i: $i + 20;
    }

    $i: 5;
    @while $i < 100 {
      .g-width-#{$i}vw#{$infix} {
        width: #{$i}vw !important;
      }

      .g-max-width-#{$i}vw#{$infix} {
        max-width: #{$i}vw !important;
      }

      .g-min-width-#{$i}vw#{$infix} {
        max-width: #{$i}vw !important;
      }
      $i: $i + 5;
    }
  }
}
