.grid-container,
.grid-container-fluid,
.grid-container .grid-row,
.grid-container-fluid .grid-row {
  .offset-full {
    grid-column: 1/-1;
  }
  .offset-none {
    display: none;
  }
  @for $i from 1 through map-deep-get($grid, 'base', 'column', 'count') {
    .offset-#{$i} {
      grid-column: span $i;
    }
  }
  @each $breakpoint in map-deep-get($grid, 'media', 'breakpoint') {
    @for $i from 1 through map-deep-get($grid, 'media', $breakpoint, 'column', 'count') {
      .offset-#{$breakpoint}-#{$i} {
        @media screen and (max-width: map-deep-get($grid, 'media', $breakpoint, 'max-width')) {
          display: grid;
          grid-column: span $i;
        }
      }
    }

    .offset-#{$breakpoint}-none {
      @media screen and (max-width: map-deep-get($grid, 'media', $breakpoint, 'max-width')) {
        display: none;
      }
    }
  }
}