@mixin make-gutters($gutter: $grid-gutter-width) {
  padding-right: ($gutter / 2);
  padding-left: ($gutter / 2);
}

@mixin make-col($size, $columns: $grid-columns) {
  flex: 0 0 percentage-round($size / $columns, 2);
  max-width: percentage-round($size / $columns, 2); // for browser compatibility.
}

@mixin make-col-offset($size, $columns: $grid-columns) {
  margin-left: percentage-round($size / $columns, 2);
}

@mixin make-col-push($size, $columns: $grid-columns) {
  left: if($size > 0, percentage-round($size / $columns, 2), auto);
}

@mixin make-col-pull($size, $columns: $grid-columns) {
  right: if($size > 0, percentage-round($size / $columns, 2), auto);
}

@mixin make-grid-columns($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
  %column-common {
    @include make-gutters();
    position: relative;
    width: 100%;
    min-height: 1px;
  }

  @each $key in map-keys($breakpoints) {
    $infix: if($key == 'base', '', ('-' + $key));
    $size: map-get($breakpoints, $key);

    // common-values.
    @for $i from 1 through $columns {
      .col#{$infix}-#{$i} {
        @extend %column-common;
      }
    }

    .col#{$infix},
    .col#{$infix}-auto {
      @extend %column-common;
    }

    // media-query
    @include media-up($size) {
      .col#{$infix} {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
      }

      .col#{$infix}-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
      }

      @for $i from 1 through $columns {
        .col#{$infix}-#{$i} {
          @include make-col($i, $columns);
        }
      }

      // column modifiers.
      @for $i from 0 through $columns {
        .pull#{$infix}-#{$i} {
          @include make-col-pull($i, $columns);
        }

        .push#{$infix}-#{$i} {
          @include make-col-push($i, $columns);
        }

        @if (0 < $i and $i < $columns) {
          .offset#{$infix}-#{$i} {
            @include make-col-offset($i, $columns);
          }
        }
      }
    }
  }
}

//======================================================================
// Grid
//======================================================================

// container
.container {
  width: 92%;
  margin-right: auto;
  margin-left: auto;

  @include media-tablet-up {
    width: 84%;
  }

  .row {
    margin-right: - ($grid-gutter-width / 2);
    margin-left: - ($grid-gutter-width / 2);
  }
}

// grid
// row
.row {
  display: flex;
  flex-wrap: wrap;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

// col
@include make-grid-columns();