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