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

.grid-gutter {
  margin-left: div(-$grid-gutter-mobile,2);
  margin-right: div(-$grid-gutter-mobile,2);

  @include breakpoint($container-breakpoint) {
    margin-left: div(-$grid-gutter,2);
    margin-right: div(-$grid-gutter,2);
  }

  &.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: $container-offset-mobile - div($grid-gutter-mobile,2);
    padding-right: $container-offset-mobile - div($grid-gutter-mobile,2);

    @include breakpoint($container-breakpoint) {
      margin-left: auto;
      margin-right: auto;
      padding-left: $container-offset - div($grid-gutter,2);
      padding-right: $container-offset - div($grid-gutter,2);
    }
  }

  > [class*='col-'] {
    padding-left: div($grid-gutter-mobile,2);
    padding-right: div($grid-gutter-mobile,2);

    @include breakpoint($container-breakpoint) {
      padding-left: div($grid-gutter,2);
      padding-right: div($grid-gutter,2);
    }
  }
}

@include grid-column-generator($columns);
@include grid-offset-generator($columns);
@include grid-column-max-generator($columns);

.grid-reverse {
  flex-direction: row-reverse;
}