@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));
      }
    }
  }
}

}