// –– GRID

$grid-gutter: 15px !default;

.grid, .grid-flex {
    .row {
        &:last-of-type { margin-bottom: $grid-gutter; }
        & > * {
            display: block;
            padding: 10px;
        }
    }
}

.grid {
    display: grid;
    margin: 0 auto;
    &.with-gutters { grid-gap: $grid-gutter; }
    .row {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: $grid-gutter;
      }
      @for $i from 1 through 12 {
        .push-#{$i} { grid-column-start: #{$i + 1}; }
        .col-#{$i} { grid-column-end: span #{$i}; }
    }
}

.grid-flex {
    &.with-gutters { .col + .col { margin-left: $grid-gutter; } }
    .row {
    display: flex;
    width: 100%;
        .col {
            flex-basis: 0;
            flex-grow: 1;
            flex-shrink: 1;
        }
    }
}