@use '../settings/index' as *;
@use 'sass:math';
@use 'sass:string';
@use 'sass:meta';
@use 'sass:list';

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: $container-max;
  padding-left: $gutter;
  padding-right: $gutter;
  box-sizing: border-box;
}

.row {
  display: grid;
  grid-template-columns: repeat(#{$columns}, 1fr);
  gap: $gutter;
  width: 100%;
  align-items: stretch;
}

/* column spans */
@for $i from 1 through $columns {
  .col-#{$i} {
    grid-column: span $i;
  }
}

/* responsive helpers: .col-sm-6 .col-md-4 etc */
@each $name, $bp in $breakpoints {
  @if $bp != 0 {
    @media (min-width: $bp) {
      @for $i from 1 through $columns {
        .col-#{$name}-#{$i} {
          grid-column: span $i;
        }
      }
    }
  }
}

/* utility: full width column */
.col-full {
  grid-column: 1 / -1;
}

/* offset helper: .offset-md-2 */
@for $i from 1 through $columns {
  .offset-#{$i} {
    margin-left: calc((100% / #{$columns}) * #{$i} + (#{$gutter} * #{$i}));
  }
  @each $name, $bp in $breakpoints {
    @if $bp != 0 {
      @media (min-width: $bp) {
        .offset-#{$name}-#{$i} {
          margin-left: calc((100% / #{$columns}) * #{$i} + (#{$gutter} * #{$i}));
        }
      }
    }
  }
}