Grid

input.scss

@use "sass:math";
@use "sass:map";

// COLOURS
$purple:	       #6935D3;
$teal:		       #68D9CF;
$neutral-teal:   #E7F9F7;
$dark-navy:      #192851;
$neutral-navy:   #E6E9F2;
$pale-blue:      #F0F1F6;
$light-purple:   #7A708C;
$smoky-purple:   #92849f;
$electric-blue:  #087EB5;
$yellow:         #F7BF31;
$pink:           #E22265;
$error-red:      #EA5C5C;
$azure:          #3B5998;
$white:          #fff;
$grey:           #f4f4f4;
$light-grey:     #f7f7f7;
$dark-grey:      #CCCCCC;
$darkest-grey:   #757575;
$sand:           #F6EFEA;
$orange:         #F08357;

$links-colour: $teal;

$nav_break: 1215;

$page-container-width: 86.25rem;
$xl-container-width: 86.25rem;
$max-grid-columns: 12;
$grid-gap: 2.5rem;

$xs_break: 480;
$sm_break: 768;
$md_break: 992;
$lg_break: 1200;

// Grid Config
$breakpoints: (
  xs: $xs_break,
  sm: $sm_break,
  md: $md_break,
  lg: $lg_break
);
$breakpoint-columns: (
  xs: 2,
  sm: 6,
  md: 8,
  lg: 12
);

$global-padding: 1.25rem;
$section-padding-xs: 0.625rem; // 10
$section-padding-sm: 1.875rem; // 30
$section-padding-md: 3.4375rem; // 55
$section-padding-lg: 5.3125rem; // 85
$section-padding-xl: 7.5rem; // 120


@mixin screen-min-width($breakpoint) {
  @media only screen and (min-width: $breakpoint + px) { @content; }
}

@mixin screen-max-width($breakpoint) {
  @media only screen and (max-width: $breakpoint + px) { @content; }
}

@mixin screen-min-height($breakpoint) {
  @media only screen and (min-height: $breakpoint + px) { @content; }
}

@mixin screen-max-height($breakpoint) {
  @media only screen and (max-height: $breakpoint + px) { @content; }
}

@mixin links-underline {
  text-decoration: none;
  text-decoration-skip-ink: auto;
  color:inherit;
  box-shadow: inset 0 -2px 0 $links-colour;
  bottom: 0;
  transition: all 0.3s;
  z-index: -1;
  &:active,
  &:focus,
  &:hover {
    color: $dark-navy;
    background-color: $links-colour;
  }
}
.grid {
  display: grid;
  max-width: $xl-container-width;
  width: 100%;
  margin: 0 auto;
}

.alignCenter {
  align-self: center;
}

.fullWidth {
  max-width: unset;
}

.gutters {
  padding: 0 div($grid-gap, 2);
}

.colGap {
  column-gap: $grid-gap;
}

.rowGap {
  row-gap: div($grid-gap, 2);

  @include screen-min-width($sm_break) {
    row-gap: $grid-gap;
  }
}

@each $bp-key, $bp-value in $breakpoints {
  $columns: map-get($breakpoint-columns, $bp-key);

  @if $bp-key == "xs" {
    $bp-value: 0;
  }

  @include screen-min-width($bp-value) {
    .grid {
      grid-template-columns: repeat($columns, 1fr);

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

    @for $i from 1 through $columns {
      .cols-#{$bp-key}-#{$i} {
        grid-column: auto / span $i;
        display: unset;

        @for $j from 1 through $columns {
          &-offset-#{$j} {
            grid-column: ($j + 1) / span $i;
          }
        }
      }
    }

    .cols-#{$bp-key}-0 {
      display: none;
    }
  }
}

output.css

.grid {
  display: grid;
  max-width: 86.25rem;
  width: 100%;
  margin: 0 auto;
}

.alignCenter {
  align-self: center;
}

.fullWidth {
  max-width: unset;
}

.gutters {
  padding: 0 div(2.5rem, 2);
}

.colGap {
  column-gap: 2.5rem;
}

.rowGap {
  row-gap: div(2.5rem, 2);
}
@media only screen and (min-width: 768px) {
  .rowGap {
    row-gap: 2.5rem;
  }
}

@media only screen and (min-width: 0px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid > * {
    grid-column: auto/span 2;
  }

  .cols-xs-1 {
    grid-column: auto/span 1;
    display: unset;
  }
  .cols-xs-1-offset-1 {
    grid-column: 2/span 1;
  }
  .cols-xs-1-offset-2 {
    grid-column: 3/span 1;
  }

  .cols-xs-2 {
    grid-column: auto/span 2;
    display: unset;
  }
  .cols-xs-2-offset-1 {
    grid-column: 2/span 2;
  }
  .cols-xs-2-offset-2 {
    grid-column: 3/span 2;
  }

  .cols-xs-0 {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .grid > * {
    grid-column: auto/span 6;
  }

  .cols-sm-1 {
    grid-column: auto/span 1;
    display: unset;
  }
  .cols-sm-1-offset-1 {
    grid-column: 2/span 1;
  }
  .cols-sm-1-offset-2 {
    grid-column: 3/span 1;
  }
  .cols-sm-1-offset-3 {
    grid-column: 4/span 1;
  }
  .cols-sm-1-offset-4 {
    grid-column: 5/span 1;
  }
  .cols-sm-1-offset-5 {
    grid-column: 6/span 1;
  }
  .cols-sm-1-offset-6 {
    grid-column: 7/span 1;
  }

  .cols-sm-2 {
    grid-column: auto/span 2;
    display: unset;
  }
  .cols-sm-2-offset-1 {
    grid-column: 2/span 2;
  }
  .cols-sm-2-offset-2 {
    grid-column: 3/span 2;
  }
  .cols-sm-2-offset-3 {
    grid-column: 4/span 2;
  }
  .cols-sm-2-offset-4 {
    grid-column: 5/span 2;
  }
  .cols-sm-2-offset-5 {
    grid-column: 6/span 2;
  }
  .cols-sm-2-offset-6 {
    grid-column: 7/span 2;
  }

  .cols-sm-3 {
    grid-column: auto/span 3;
    display: unset;
  }
  .cols-sm-3-offset-1 {
    grid-column: 2/span 3;
  }
  .cols-sm-3-offset-2 {
    grid-column: 3/span 3;
  }
  .cols-sm-3-offset-3 {
    grid-column: 4/span 3;
  }
  .cols-sm-3-offset-4 {
    grid-column: 5/span 3;
  }
  .cols-sm-3-offset-5 {
    grid-column: 6/span 3;
  }
  .cols-sm-3-offset-6 {
    grid-column: 7/span 3;
  }

  .cols-sm-4 {
    grid-column: auto/span 4;
    display: unset;
  }
  .cols-sm-4-offset-1 {
    grid-column: 2/span 4;
  }
  .cols-sm-4-offset-2 {
    grid-column: 3/span 4;
  }
  .cols-sm-4-offset-3 {
    grid-column: 4/span 4;
  }
  .cols-sm-4-offset-4 {
    grid-column: 5/span 4;
  }
  .cols-sm-4-offset-5 {
    grid-column: 6/span 4;
  }
  .cols-sm-4-offset-6 {
    grid-column: 7/span 4;
  }

  .cols-sm-5 {
    grid-column: auto/span 5;
    display: unset;
  }
  .cols-sm-5-offset-1 {
    grid-column: 2/span 5;
  }
  .cols-sm-5-offset-2 {
    grid-column: 3/span 5;
  }
  .cols-sm-5-offset-3 {
    grid-column: 4/span 5;
  }
  .cols-sm-5-offset-4 {
    grid-column: 5/span 5;
  }
  .cols-sm-5-offset-5 {
    grid-column: 6/span 5;
  }
  .cols-sm-5-offset-6 {
    grid-column: 7/span 5;
  }

  .cols-sm-6 {
    grid-column: auto/span 6;
    display: unset;
  }
  .cols-sm-6-offset-1 {
    grid-column: 2/span 6;
  }
  .cols-sm-6-offset-2 {
    grid-column: 3/span 6;
  }
  .cols-sm-6-offset-3 {
    grid-column: 4/span 6;
  }
  .cols-sm-6-offset-4 {
    grid-column: 5/span 6;
  }
  .cols-sm-6-offset-5 {
    grid-column: 6/span 6;
  }
  .cols-sm-6-offset-6 {
    grid-column: 7/span 6;
  }

  .cols-sm-0 {
    display: none;
  }
}
@media only screen and (min-width: 992px) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
  }
  .grid > * {
    grid-column: auto/span 8;
  }

  .cols-md-1 {
    grid-column: auto/span 1;
    display: unset;
  }
  .cols-md-1-offset-1 {
    grid-column: 2/span 1;
  }
  .cols-md-1-offset-2 {
    grid-column: 3/span 1;
  }
  .cols-md-1-offset-3 {
    grid-column: 4/span 1;
  }
  .cols-md-1-offset-4 {
    grid-column: 5/span 1;
  }
  .cols-md-1-offset-5 {
    grid-column: 6/span 1;
  }
  .cols-md-1-offset-6 {
    grid-column: 7/span 1;
  }
  .cols-md-1-offset-7 {
    grid-column: 8/span 1;
  }
  .cols-md-1-offset-8 {
    grid-column: 9/span 1;
  }

  .cols-md-2 {
    grid-column: auto/span 2;
    display: unset;
  }
  .cols-md-2-offset-1 {
    grid-column: 2/span 2;
  }
  .cols-md-2-offset-2 {
    grid-column: 3/span 2;
  }
  .cols-md-2-offset-3 {
    grid-column: 4/span 2;
  }
  .cols-md-2-offset-4 {
    grid-column: 5/span 2;
  }
  .cols-md-2-offset-5 {
    grid-column: 6/span 2;
  }
  .cols-md-2-offset-6 {
    grid-column: 7/span 2;
  }
  .cols-md-2-offset-7 {
    grid-column: 8/span 2;
  }
  .cols-md-2-offset-8 {
    grid-column: 9/span 2;
  }

  .cols-md-3 {
    grid-column: auto/span 3;
    display: unset;
  }
  .cols-md-3-offset-1 {
    grid-column: 2/span 3;
  }
  .cols-md-3-offset-2 {
    grid-column: 3/span 3;
  }
  .cols-md-3-offset-3 {
    grid-column: 4/span 3;
  }
  .cols-md-3-offset-4 {
    grid-column: 5/span 3;
  }
  .cols-md-3-offset-5 {
    grid-column: 6/span 3;
  }
  .cols-md-3-offset-6 {
    grid-column: 7/span 3;
  }
  .cols-md-3-offset-7 {
    grid-column: 8/span 3;
  }
  .cols-md-3-offset-8 {
    grid-column: 9/span 3;
  }

  .cols-md-4 {
    grid-column: auto/span 4;
    display: unset;
  }
  .cols-md-4-offset-1 {
    grid-column: 2/span 4;
  }
  .cols-md-4-offset-2 {
    grid-column: 3/span 4;
  }
  .cols-md-4-offset-3 {
    grid-column: 4/span 4;
  }
  .cols-md-4-offset-4 {
    grid-column: 5/span 4;
  }
  .cols-md-4-offset-5 {
    grid-column: 6/span 4;
  }
  .cols-md-4-offset-6 {
    grid-column: 7/span 4;
  }
  .cols-md-4-offset-7 {
    grid-column: 8/span 4;
  }
  .cols-md-4-offset-8 {
    grid-column: 9/span 4;
  }

  .cols-md-5 {
    grid-column: auto/span 5;
    display: unset;
  }
  .cols-md-5-offset-1 {
    grid-column: 2/span 5;
  }
  .cols-md-5-offset-2 {
    grid-column: 3/span 5;
  }
  .cols-md-5-offset-3 {
    grid-column: 4/span 5;
  }
  .cols-md-5-offset-4 {
    grid-column: 5/span 5;
  }
  .cols-md-5-offset-5 {
    grid-column: 6/span 5;
  }
  .cols-md-5-offset-6 {
    grid-column: 7/span 5;
  }
  .cols-md-5-offset-7 {
    grid-column: 8/span 5;
  }
  .cols-md-5-offset-8 {
    grid-column: 9/span 5;
  }

  .cols-md-6 {
    grid-column: auto/span 6;
    display: unset;
  }
  .cols-md-6-offset-1 {
    grid-column: 2/span 6;
  }
  .cols-md-6-offset-2 {
    grid-column: 3/span 6;
  }
  .cols-md-6-offset-3 {
    grid-column: 4/span 6;
  }
  .cols-md-6-offset-4 {
    grid-column: 5/span 6;
  }
  .cols-md-6-offset-5 {
    grid-column: 6/span 6;
  }
  .cols-md-6-offset-6 {
    grid-column: 7/span 6;
  }
  .cols-md-6-offset-7 {
    grid-column: 8/span 6;
  }
  .cols-md-6-offset-8 {
    grid-column: 9/span 6;
  }

  .cols-md-7 {
    grid-column: auto/span 7;
    display: unset;
  }
  .cols-md-7-offset-1 {
    grid-column: 2/span 7;
  }
  .cols-md-7-offset-2 {
    grid-column: 3/span 7;
  }
  .cols-md-7-offset-3 {
    grid-column: 4/span 7;
  }
  .cols-md-7-offset-4 {
    grid-column: 5/span 7;
  }
  .cols-md-7-offset-5 {
    grid-column: 6/span 7;
  }
  .cols-md-7-offset-6 {
    grid-column: 7/span 7;
  }
  .cols-md-7-offset-7 {
    grid-column: 8/span 7;
  }
  .cols-md-7-offset-8 {
    grid-column: 9/span 7;
  }

  .cols-md-8 {
    grid-column: auto/span 8;
    display: unset;
  }
  .cols-md-8-offset-1 {
    grid-column: 2/span 8;
  }
  .cols-md-8-offset-2 {
    grid-column: 3/span 8;
  }
  .cols-md-8-offset-3 {
    grid-column: 4/span 8;
  }
  .cols-md-8-offset-4 {
    grid-column: 5/span 8;
  }
  .cols-md-8-offset-5 {
    grid-column: 6/span 8;
  }
  .cols-md-8-offset-6 {
    grid-column: 7/span 8;
  }
  .cols-md-8-offset-7 {
    grid-column: 8/span 8;
  }
  .cols-md-8-offset-8 {
    grid-column: 9/span 8;
  }

  .cols-md-0 {
    display: none;
  }
}
@media only screen and (min-width: 1200px) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .grid > * {
    grid-column: auto/span 12;
  }

  .cols-lg-1 {
    grid-column: auto/span 1;
    display: unset;
  }
  .cols-lg-1-offset-1 {
    grid-column: 2/span 1;
  }
  .cols-lg-1-offset-2 {
    grid-column: 3/span 1;
  }
  .cols-lg-1-offset-3 {
    grid-column: 4/span 1;
  }
  .cols-lg-1-offset-4 {
    grid-column: 5/span 1;
  }
  .cols-lg-1-offset-5 {
    grid-column: 6/span 1;
  }
  .cols-lg-1-offset-6 {
    grid-column: 7/span 1;
  }
  .cols-lg-1-offset-7 {
    grid-column: 8/span 1;
  }
  .cols-lg-1-offset-8 {
    grid-column: 9/span 1;
  }
  .cols-lg-1-offset-9 {
    grid-column: 10/span 1;
  }
  .cols-lg-1-offset-10 {
    grid-column: 11/span 1;
  }
  .cols-lg-1-offset-11 {
    grid-column: 12/span 1;
  }
  .cols-lg-1-offset-12 {
    grid-column: 13/span 1;
  }

  .cols-lg-2 {
    grid-column: auto/span 2;
    display: unset;
  }
  .cols-lg-2-offset-1 {
    grid-column: 2/span 2;
  }
  .cols-lg-2-offset-2 {
    grid-column: 3/span 2;
  }
  .cols-lg-2-offset-3 {
    grid-column: 4/span 2;
  }
  .cols-lg-2-offset-4 {
    grid-column: 5/span 2;
  }
  .cols-lg-2-offset-5 {
    grid-column: 6/span 2;
  }
  .cols-lg-2-offset-6 {
    grid-column: 7/span 2;
  }
  .cols-lg-2-offset-7 {
    grid-column: 8/span 2;
  }
  .cols-lg-2-offset-8 {
    grid-column: 9/span 2;
  }
  .cols-lg-2-offset-9 {
    grid-column: 10/span 2;
  }
  .cols-lg-2-offset-10 {
    grid-column: 11/span 2;
  }
  .cols-lg-2-offset-11 {
    grid-column: 12/span 2;
  }
  .cols-lg-2-offset-12 {
    grid-column: 13/span 2;
  }

  .cols-lg-3 {
    grid-column: auto/span 3;
    display: unset;
  }
  .cols-lg-3-offset-1 {
    grid-column: 2/span 3;
  }
  .cols-lg-3-offset-2 {
    grid-column: 3/span 3;
  }
  .cols-lg-3-offset-3 {
    grid-column: 4/span 3;
  }
  .cols-lg-3-offset-4 {
    grid-column: 5/span 3;
  }
  .cols-lg-3-offset-5 {
    grid-column: 6/span 3;
  }
  .cols-lg-3-offset-6 {
    grid-column: 7/span 3;
  }
  .cols-lg-3-offset-7 {
    grid-column: 8/span 3;
  }
  .cols-lg-3-offset-8 {
    grid-column: 9/span 3;
  }
  .cols-lg-3-offset-9 {
    grid-column: 10/span 3;
  }
  .cols-lg-3-offset-10 {
    grid-column: 11/span 3;
  }
  .cols-lg-3-offset-11 {
    grid-column: 12/span 3;
  }
  .cols-lg-3-offset-12 {
    grid-column: 13/span 3;
  }

  .cols-lg-4 {
    grid-column: auto/span 4;
    display: unset;
  }
  .cols-lg-4-offset-1 {
    grid-column: 2/span 4;
  }
  .cols-lg-4-offset-2 {
    grid-column: 3/span 4;
  }
  .cols-lg-4-offset-3 {
    grid-column: 4/span 4;
  }
  .cols-lg-4-offset-4 {
    grid-column: 5/span 4;
  }
  .cols-lg-4-offset-5 {
    grid-column: 6/span 4;
  }
  .cols-lg-4-offset-6 {
    grid-column: 7/span 4;
  }
  .cols-lg-4-offset-7 {
    grid-column: 8/span 4;
  }
  .cols-lg-4-offset-8 {
    grid-column: 9/span 4;
  }
  .cols-lg-4-offset-9 {
    grid-column: 10/span 4;
  }
  .cols-lg-4-offset-10 {
    grid-column: 11/span 4;
  }
  .cols-lg-4-offset-11 {
    grid-column: 12/span 4;
  }
  .cols-lg-4-offset-12 {
    grid-column: 13/span 4;
  }

  .cols-lg-5 {
    grid-column: auto/span 5;
    display: unset;
  }
  .cols-lg-5-offset-1 {
    grid-column: 2/span 5;
  }
  .cols-lg-5-offset-2 {
    grid-column: 3/span 5;
  }
  .cols-lg-5-offset-3 {
    grid-column: 4/span 5;
  }
  .cols-lg-5-offset-4 {
    grid-column: 5/span 5;
  }
  .cols-lg-5-offset-5 {
    grid-column: 6/span 5;
  }
  .cols-lg-5-offset-6 {
    grid-column: 7/span 5;
  }
  .cols-lg-5-offset-7 {
    grid-column: 8/span 5;
  }
  .cols-lg-5-offset-8 {
    grid-column: 9/span 5;
  }
  .cols-lg-5-offset-9 {
    grid-column: 10/span 5;
  }
  .cols-lg-5-offset-10 {
    grid-column: 11/span 5;
  }
  .cols-lg-5-offset-11 {
    grid-column: 12/span 5;
  }
  .cols-lg-5-offset-12 {
    grid-column: 13/span 5;
  }

  .cols-lg-6 {
    grid-column: auto/span 6;
    display: unset;
  }
  .cols-lg-6-offset-1 {
    grid-column: 2/span 6;
  }
  .cols-lg-6-offset-2 {
    grid-column: 3/span 6;
  }
  .cols-lg-6-offset-3 {
    grid-column: 4/span 6;
  }
  .cols-lg-6-offset-4 {
    grid-column: 5/span 6;
  }
  .cols-lg-6-offset-5 {
    grid-column: 6/span 6;
  }
  .cols-lg-6-offset-6 {
    grid-column: 7/span 6;
  }
  .cols-lg-6-offset-7 {
    grid-column: 8/span 6;
  }
  .cols-lg-6-offset-8 {
    grid-column: 9/span 6;
  }
  .cols-lg-6-offset-9 {
    grid-column: 10/span 6;
  }
  .cols-lg-6-offset-10 {
    grid-column: 11/span 6;
  }
  .cols-lg-6-offset-11 {
    grid-column: 12/span 6;
  }
  .cols-lg-6-offset-12 {
    grid-column: 13/span 6;
  }

  .cols-lg-7 {
    grid-column: auto/span 7;
    display: unset;
  }
  .cols-lg-7-offset-1 {
    grid-column: 2/span 7;
  }
  .cols-lg-7-offset-2 {
    grid-column: 3/span 7;
  }
  .cols-lg-7-offset-3 {
    grid-column: 4/span 7;
  }
  .cols-lg-7-offset-4 {
    grid-column: 5/span 7;
  }
  .cols-lg-7-offset-5 {
    grid-column: 6/span 7;
  }
  .cols-lg-7-offset-6 {
    grid-column: 7/span 7;
  }
  .cols-lg-7-offset-7 {
    grid-column: 8/span 7;
  }
  .cols-lg-7-offset-8 {
    grid-column: 9/span 7;
  }
  .cols-lg-7-offset-9 {
    grid-column: 10/span 7;
  }
  .cols-lg-7-offset-10 {
    grid-column: 11/span 7;
  }
  .cols-lg-7-offset-11 {
    grid-column: 12/span 7;
  }
  .cols-lg-7-offset-12 {
    grid-column: 13/span 7;
  }

  .cols-lg-8 {
    grid-column: auto/span 8;
    display: unset;
  }
  .cols-lg-8-offset-1 {
    grid-column: 2/span 8;
  }
  .cols-lg-8-offset-2 {
    grid-column: 3/span 8;
  }
  .cols-lg-8-offset-3 {
    grid-column: 4/span 8;
  }
  .cols-lg-8-offset-4 {
    grid-column: 5/span 8;
  }
  .cols-lg-8-offset-5 {
    grid-column: 6/span 8;
  }
  .cols-lg-8-offset-6 {
    grid-column: 7/span 8;
  }
  .cols-lg-8-offset-7 {
    grid-column: 8/span 8;
  }
  .cols-lg-8-offset-8 {
    grid-column: 9/span 8;
  }
  .cols-lg-8-offset-9 {
    grid-column: 10/span 8;
  }
  .cols-lg-8-offset-10 {
    grid-column: 11/span 8;
  }
  .cols-lg-8-offset-11 {
    grid-column: 12/span 8;
  }
  .cols-lg-8-offset-12 {
    grid-column: 13/span 8;
  }

  .cols-lg-9 {
    grid-column: auto/span 9;
    display: unset;
  }
  .cols-lg-9-offset-1 {
    grid-column: 2/span 9;
  }
  .cols-lg-9-offset-2 {
    grid-column: 3/span 9;
  }
  .cols-lg-9-offset-3 {
    grid-column: 4/span 9;
  }
  .cols-lg-9-offset-4 {
    grid-column: 5/span 9;
  }
  .cols-lg-9-offset-5 {
    grid-column: 6/span 9;
  }
  .cols-lg-9-offset-6 {
    grid-column: 7/span 9;
  }
  .cols-lg-9-offset-7 {
    grid-column: 8/span 9;
  }
  .cols-lg-9-offset-8 {
    grid-column: 9/span 9;
  }
  .cols-lg-9-offset-9 {
    grid-column: 10/span 9;
  }
  .cols-lg-9-offset-10 {
    grid-column: 11/span 9;
  }
  .cols-lg-9-offset-11 {
    grid-column: 12/span 9;
  }
  .cols-lg-9-offset-12 {
    grid-column: 13/span 9;
  }

  .cols-lg-10 {
    grid-column: auto/span 10;
    display: unset;
  }
  .cols-lg-10-offset-1 {
    grid-column: 2/span 10;
  }
  .cols-lg-10-offset-2 {
    grid-column: 3/span 10;
  }
  .cols-lg-10-offset-3 {
    grid-column: 4/span 10;
  }
  .cols-lg-10-offset-4 {
    grid-column: 5/span 10;
  }
  .cols-lg-10-offset-5 {
    grid-column: 6/span 10;
  }
  .cols-lg-10-offset-6 {
    grid-column: 7/span 10;
  }
  .cols-lg-10-offset-7 {
    grid-column: 8/span 10;
  }
  .cols-lg-10-offset-8 {
    grid-column: 9/span 10;
  }
  .cols-lg-10-offset-9 {
    grid-column: 10/span 10;
  }
  .cols-lg-10-offset-10 {
    grid-column: 11/span 10;
  }
  .cols-lg-10-offset-11 {
    grid-column: 12/span 10;
  }
  .cols-lg-10-offset-12 {
    grid-column: 13/span 10;
  }

  .cols-lg-11 {
    grid-column: auto/span 11;
    display: unset;
  }
  .cols-lg-11-offset-1 {
    grid-column: 2/span 11;
  }
  .cols-lg-11-offset-2 {
    grid-column: 3/span 11;
  }
  .cols-lg-11-offset-3 {
    grid-column: 4/span 11;
  }
  .cols-lg-11-offset-4 {
    grid-column: 5/span 11;
  }
  .cols-lg-11-offset-5 {
    grid-column: 6/span 11;
  }
  .cols-lg-11-offset-6 {
    grid-column: 7/span 11;
  }
  .cols-lg-11-offset-7 {
    grid-column: 8/span 11;
  }
  .cols-lg-11-offset-8 {
    grid-column: 9/span 11;
  }
  .cols-lg-11-offset-9 {
    grid-column: 10/span 11;
  }
  .cols-lg-11-offset-10 {
    grid-column: 11/span 11;
  }
  .cols-lg-11-offset-11 {
    grid-column: 12/span 11;
  }
  .cols-lg-11-offset-12 {
    grid-column: 13/span 11;
  }

  .cols-lg-12 {
    grid-column: auto/span 12;
    display: unset;
  }
  .cols-lg-12-offset-1 {
    grid-column: 2/span 12;
  }
  .cols-lg-12-offset-2 {
    grid-column: 3/span 12;
  }
  .cols-lg-12-offset-3 {
    grid-column: 4/span 12;
  }
  .cols-lg-12-offset-4 {
    grid-column: 5/span 12;
  }
  .cols-lg-12-offset-5 {
    grid-column: 6/span 12;
  }
  .cols-lg-12-offset-6 {
    grid-column: 7/span 12;
  }
  .cols-lg-12-offset-7 {
    grid-column: 8/span 12;
  }
  .cols-lg-12-offset-8 {
    grid-column: 9/span 12;
  }
  .cols-lg-12-offset-9 {
    grid-column: 10/span 12;
  }
  .cols-lg-12-offset-10 {
    grid-column: 11/span 12;
  }
  .cols-lg-12-offset-11 {
    grid-column: 12/span 12;
  }
  .cols-lg-12-offset-12 {
    grid-column: 13/span 12;
  }

  .cols-lg-0 {
    display: none;
  }
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}