%border-after {
  content: '';
  position: absolute;
  height: 100%;
  top: 0;
  left: -.5rem;
}

.grid {
  display: grid;
  max-width: 100%;
  grid-template-rows: max-content;
  grid-row-gap: .5rem;
  grid-column-gap: .5rem;
  align-content: start;
  justify-content: baseline;

  @include mobile() {
    width: 100%;
    max-width: 100%;
  }

  @for $i from 1 through 6 {
    &.gap-#{$i} {
      grid-column-gap: #{$i}rem;
      grid-row-gap: #{$i}rem;

      [class^='border'] {
        &::after {
          left: -#{$i / 2}rem;
        }
      }
    }
  }

  @for $i from 1 through 12 {
    &.col-#{$i} {
      height: fit-content;
      grid-template-columns: repeat(#{$i}, 1fr);
    }

    .span-#{$i} {
      grid-column-end: span #{$i};
    }

    @include mobile() {
      &.col-sm-#{$i} {
        height: fit-content;
        grid-template-columns: repeat(#{$i}, 1fr) !important;
      }

      .span-sm-#{$i} {
        grid-column-end: span #{$i} !important;
      }
    }
  }

  .span-sm-0 {
    @include mobile() {
      display: none;
    }
  }

  + .grid {
    margin-top: .5rem;
  }

  > .fluid {
    width: 90%;
    margin: 0 14px;
  }

  > * {

    &.border {
      position: relative;

      &::after {
        @extend %border-after;
        border-left: 1px solid color(_gray, extra-light);
      }
    }

    @each $theme in $themes {
      &.border-#{$theme} {
        position: relative;

        &::after {
          @extend %border-after;
          border-left: 1px solid color(_#{$theme}, extra-light);;
        }
      }
    }
  }

  &.form-areas {
    grid-template-areas: 'left right';

    @include mobile() {
      grid-template-areas:
        'right'
        'left';
    }

    .form-area-left {
      grid-area: left;
    }

    .form-area-center {
      grid-area: center;
    }

    .form-area-right {
      grid-area: right;
    }
  }
}