:root {
  --gap: #{$grid-gap};
  --col-count: #{$grid-column-count};
  --cols: repeat(var(--col-count), minmax(0, 1fr));
  --rows: auto;
}


.grid {
  display: grid;
  gap: var(--gap);
  grid-template-rows: var(--rows);
  grid-template-columns: var(--cols);
  width: 100%;

  align-content: start;

  & > * {
    grid-column: auto / span 12;
  }

  @each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

      // span an item a certain amount of columns
      @for $i from 1 through $grid-column-count {
        .#{$infix}col-span-#{$i} {
          grid-column: auto / span $i;
        }
      }

      // span an item a cetrain amount of rows
      @for $i from 1 through $grid-column-count {
        .#{$infix}row-span-#{$i} {
          grid-row: auto / span $i;
        }
      }

      // define where an item starts on the inline (X) axis (offset)
      @for $i from 1 through ($grid-column-count - 1) {
        .#{$infix}col-start-#{$i} {
          grid-column-start: $i;
        }
      }

      #{$infix}col-start-auto {
        grid-column-start: auto;
      }

      // define where an item ends on the inline (X) axis
      @for $i from 1 through $grid-column-count {
        .#{$infix}col-end-#{$i} {
          grid-column-end: ($i + 1);
        }
      }

      #{$infix}col-end-auto {
        grid-column-end: auto;
      }

      // define where an item starts on the inline block (Y) axis (offset)
      @for $i from 1 through 24 {
        .#{$infix}row-start-#{$i} {
          grid-row-start: $i;
        }
      }

      #{$infix}row-start-auto {
        grid-row-start: auto;
      }

      // define where an item ends on the block (Y) axis
      @for $i from 1 through 24 {
        .#{$infix}row-end-#{$i} {
          grid-row-end: ($i + 1);
        }
      }

      .#{$infix}row-end-auto {
        grid-row-end: auto;
      }
    }
  }  
}

//* Grid default column settings

.grid-6-col-default {
  & > * {
    grid-column: auto / span 6;
  }
}

.sm-grid-6-col-default {
  @include media-breakpoint-up(sm) {
    & > * {
      grid-column: auto / span 6;
    }
  }
}

.md-grid-6-col-default {
  @include media-breakpoint-up(md) {
    & > * {
      grid-column: auto / span 6;
    }
  }
}

.lg-grid-6-col-default {
  @include media-breakpoint-up(lg) {
    & > * {
      grid-column: auto / span 6;
    }
  }
}

.xl-grid-6-col-default {
  @include media-breakpoint-up(xl) {
    & > * {
      grid-column: auto / span 6;
    }
  }
}

.xxl-grid-6-col-default {
  @include media-breakpoint-up(xxl) {
    & > * {
      grid-column: auto / span 6;
    }
  }
}