@charset 'utf-8';

.flex-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 ($grid-gutter-width / -2);

  > * {
    flex: 1 1 calc(#{percentage(1/3)} - #{$grid-gutter-width});
    min-width: 200px;
    margin: ($grid-gutter-width / 2);

    &:empty {
      margin-bottom: 0;
      margin-top: 0;
    }
  }

  @for $i from 1 through 12 {
    $percentage: percentage(1/$i);

    &.flex-grid-#{$i} {
      > * {
        min-width: (16px * $i);
        flex-basis: calc(#{$percentage} - #{$grid-gutter-width});
      }
    }
  }
}

.flex-grid-margin-2 {
  margin: 0 ($grid-gutter-width * -1);

  > * {
    flex: 1 1 calc(#{percentage(1/3)} - #{$grid-gutter-width * 2});
    margin: ($grid-gutter-width);
  }

  @for $i from 1 through 12 {
    $percentage: percentage(1/$i);

    &.flex-grid-#{$i} {
      > * {
        flex-basis: calc(#{$percentage} - #{$grid-gutter-width * 2});
      }
    }
  }
}