// -----------------------------
// Grid
// -----------------------------

@import '../functions/column-gutter';
@import '../functions/row-gutter';

.grid {
  display: grid;
  grid-template-columns: repeat($steller-grid-columns, 1fr);

  @each $breakpoint-label, $breakpoint-value in $steller-breakpoints {
    @if $breakpoint-label == nth(nth($steller-breakpoints, 1), 1) {
      grid-column-gap: column-gutter($breakpoint-label);
      grid-row-gap: row-gutter($breakpoint-label);
    }

    @else {
      @include above-breakpoint($breakpoint-label) {
        grid-column-gap: column-gutter($breakpoint-label);
        grid-row-gap: row-gutter($breakpoint-label);
      }
    }
  }
}