/* ==========================================================================
 * This grid can be turned on and off when you want to check
 * if everything is nice in place.
 * Set flag 'show_grid' to true in site.php
 * ========================================================================== */


$vg-line-color: hsla(227, 70, 50, 0.2);

// Do some calculations and put them in variables for reuse
$vg-column-count: $site-columns - 2;
$vg-column-width: percentage(1 / $vg-column-count);


.u-visible-grid {
	@include z(z-visible-grid);
	@include contain();
	position: fixed;
	left: 0;
	right: 0;
	pointer-events: none;

	@include mq(m, l) {
		padding: 0;
	}
}


.u-visible-grid__main {
	height: 100vh;
	background:
		repeating-linear-gradient(
				to right,
				$vg-line-color,
				$vg-line-color 1px,
				transparent 1px,
				transparent $vg-column-width
		),
		repeating-linear-gradient(
				to left,
				$vg-line-color,
				$vg-line-color 1px,
				transparent 1px,
				transparent 100vw
		);


}