@import "~basicgrid/src/styles/main";

@mixin flex-grid-layout(
  $n
) {
  flex-wrap: wrap;

  > .column {
    $pct: percentage(1 / $n);
    flex: 0 0 $pct;
    max-width: $pct;
  }
}

@each $size, $rem in $sizes {
  @media (min-width: $rem) {
    @for $i from 1 through 12 {
      .#{$size}-grid-#{$i} {
        @include flex-grid-layout($i);
      }
    }
  }
}