.gray-box {
  position: relative;
  padding: rem-calc(36) 0;

  // gray box has one child which wraps all the content
  > div {
    position: relative;
  }

  // before is the gray box
  &:before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    background-color: color('neutral-5');
    box-sizing: content-box;
  }

  // after is the color dash
  &:after {
    content: '';
    position: absolute;
    z-index: 1;
    display: block;
    height: rem-calc(110);
    top: rem-calc(-70);
    margin-bottom: rem-calc(-110);
  }

  @media #{$mobile-only} {
    // grey box is full width on mobile
    &:before {
      min-width: 100vw;
      left: calc(#{$gutter-width * -2});
      content: '';
      display: block;
      top: 0;
      bottom: 0;
      background-color: color('neutral-5');
    }

    &:after {
      height: rem-calc(60);
      top: rem-calc(-40);
    }
  }

  @media #{$tablet} {
    > div:first-child {
      margin-left: calc(100% / 12);
    }

    // variation where box is fixed right
    &.right {
      div:first-child {
        margin-left: auto;
      }

      &:before {
        padding-right: #{$section-padding-desktop};
        right: -#{$section-padding-desktop};
      }
    }

    // variation where box is fixed left
    &.left {
      div:first-child {
        margin-left: 0;
      }

      &:before {
        left: -#{$section-padding-desktop};
        padding-left: #{$section-padding-desktop};
      }
    }
  }
}

@for $i from 1 through 12 {
  .gray-box-lg-#{$i} {
    &:before {
      @include g-unit($i);
    }

    // Make color dash 1 column to the left of grey box right side
    &.right-dash {
      &:after {
        right: calc(100% / 12 * (#{12 - $i + 1}));
      }

      @media #{$mobile-only} {
        &:after {
          right: 100%;
        }
      }

      @media #{$tablet} {
        &.right:after {
          right: 0;
        }
      }
    }

    // the color stitch is on the left side, spaced by one column
    &.left-dash {
      @media #{$tablet} {
        &:after {
          left: calc(100% / 12 - #{$gutter-width});
        }
      }
    }
  }
}