@use 'variables';
@use "sass:math";

.container {
  width: 100%;
  padding-right: math.div(variables.$grid-gutter-width, 2);
  padding-left: math.div(variables.$grid-gutter-width, 2);
  margin-right: auto;
  margin-left: auto;

  @each $breakpoint, $width in variables.$grid-breakpoints {
    @if $width > 0 {
      @media (min-width: $width) {
        max-width: $width;
      }
    }
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: math.div(variables.$grid-gutter-width, -2);
  margin-left: math.div(variables.$grid-gutter-width, -2);
}

@for $i from 1 through variables.$grid-columns {
  .col-#{$i} {
    flex: 0 0 auto;
    width: math.div(100%, variables.$grid-columns) * $i;
    padding-right: math.div(variables.$grid-gutter-width, 2);
    padding-left: math.div(variables.$grid-gutter-width, 2);
  }
}

@each $breakpoint, $width in variables.$grid-breakpoints {
  @if $width > 0 {
    @media (min-width: $width) {
      @for $i from 1 through variables.$grid-columns {
        .col-#{$breakpoint}-#{$i} {
          flex: 0 0 auto;
          width: math.div(100%, variables.$grid-columns) * $i;
          padding-right: math.div(variables.$grid-gutter-width, 2);
          padding-left: math.div(variables.$grid-gutter-width, 2);
        }
      }
    }
  }
}