$grid-before-column-width: calc((100% - #{map-deep-get($grid, 'base', 'column', 'gap')} * #{map-deep-get($grid, 'base', 'column', 'count')}) / #{map-deep-get($grid, 'base', 'column', 'count')});

.grid-bg-before::before {
  max-width: map-deep-get($grid, 'base', 'container', 'width');
  margin: 0 auto;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  pointer-events: none;
  border: solid transparent;
  border-width: 0 calc(#{map-deep-get($grid, 'base', 'container', 'padding', 'x')} - #{map-deep-get($grid, 'base', 'column', 'gap')} / 2);
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(#{map-deep-get($grid, 'base', 'column', 'gap')} / 2),
    map-deep-get($grid, 'column-color') calc(#{map-deep-get($grid, 'base', 'column', 'gap')} / 2),
    map-deep-get($grid, 'column-color') calc(#{$grid-before-column-width} + #{map-deep-get($grid, 'base', 'column', 'gap')} / 2),
    transparent calc(#{$grid-before-column-width} + #{map-deep-get($grid, 'base', 'column', 'gap')} / 2),
    transparent calc(#{$grid-before-column-width} + #{map-deep-get($grid, 'base', 'column', 'gap')})
  );
  background-repeat: no-repeat;

  @each $breakpoint in map-deep-get($grid, 'media', 'breakpoint') {
    @media screen and (max-width: map-deep-get($grid, 'media', $breakpoint, 'max-width')) {
      $grid-before-column-width: calc((100% - #{map-deep-get($grid, 'media', $breakpoint, 'column', 'gap')} * #{map-deep-get($grid, 'media', $breakpoint, 'column', 'count')}) / #{map-deep-get($grid, 'media', $breakpoint, 'column', 'count')});

      border-width: 0 calc(#{map-deep-get($grid, 'media', $breakpoint, 'container', 'padding', 'x')} - #{map-deep-get($grid, 'media', $breakpoint, 'column', 'gap')} / 2);
      background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(#{map-deep-get($grid, 'media', $breakpoint, 'column', 'gap')} / 2),
        map-deep-get($grid, 'column-color') calc(#{map-deep-get($grid, 'media', $breakpoint, 'column', 'gap')} / 2),
        map-deep-get($grid, 'column-color') calc(#{$grid-before-column-width} + #{map-deep-get($grid, 'media', $breakpoint, 'column', 'gap')} / 2),
        transparent calc(#{$grid-before-column-width} + #{map-deep-get($grid, 'media', $breakpoint, 'column', 'gap')} / 2),
        transparent calc(#{$grid-before-column-width} + #{map-deep-get($grid, 'media', $breakpoint, 'column', 'gap')})
      );
    }
  }
}