@use "sass:map";
@use "sass:math";
@use "./../variables" as *;
@use "./../mixins/breakpoints" as *;
@use "./../mixins/grid" as *;

// Row
// Rows contain your columns.

:root {
  @each $name, $value in $breakpoints {
    --breakpoint-#{$name}: #{$value};
  }
}

.grid {
  @include make-row;
}

.grid--tight {
  @include make-row($grid-gutter-tight);
}

.grid,
.grid--tight {
  > * {
    @include make-col-ready;
  }
}

@if $enable-cssgrid {
  .g-grid {
    gap: var(--gap, #{$grid-gutter});
  }

  .g-grid--tight {
    gap: var(--gap, #{$grid-gutter-tight});
  }

  .g-grid,
  .g-grid--tight {
    display: grid;
    grid-template-rows: repeat(var(--rows, 1), 1fr);
    grid-template-columns: repeat(var(--columns, #{$grid-columns}), 1fr);

    @include make-cssgrid;
  }
}

// Columns
// Common styles for small and large grid columns

@include make-grid-columns;