@mixin grid-column-gradient($values...) {
  background-image: deprecated-webkit-gradient(linear, left top, left bottom, $values);
  background-image:  -webkit-linear-gradient(left, $values);
  background-image:     -moz-linear-gradient(left, $values);
  background-image:      -ms-linear-gradient(left, $values);
  background-image:       -o-linear-gradient(left, $values);
  background-image: unquote("linear-gradient(left, #{$values})");
}

@if $visual-grid == true or $visual-grid == yes {
  body:before {
    content: '';
    display: inline-block;
    @include grid-column-gradient(gradient-stops($grid-columns));
    height: 100%;
    left: 0;
    margin: 0 auto;
    max-width: $max-width;
    opacity: $visual-grid-opacity;
    position: fixed;
    right: 0;
    width: 100%;
    pointer-events: none;

    @if $visual-grid-index == back {
      z-index: -1;
    }

    @else if $visual-grid-index == front {
      z-index: 9999;
    }

    @each $breakpoint in $visual-grid-breakpoints {
      @if $breakpoint != nil {
        @include media($breakpoint) {
          @include grid-column-gradient(gradient-stops($grid-columns));
        }
      }
    }
  }
}