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

// Set the same number of columns as set in the grid settings
$vg-column-count:   $grid-column-count;
$vg-color-1:        rgba(0, 255, 255, 0.4);
$vg-color-2:        rgba(0, 255, 255, 0.25);

// Default values if no grid setting is set
$vg-column-count:   12 !default;
$vg-column-width:   percentage(1 / $vg-column-count) !default;


.u-visible-grid {
  @include z(z-visible-grid);
  position: fixed;
  width: 100%;
  pointer-events: none;
}

.u-visible-grid__main {
  height: 100vh;
  @include contain();
  background: repeating-linear-gradient(
      to right,
      $vg-color-1,
      $vg-color-1 $vg-column-width,
      $vg-color-2 $vg-column-width,
      $vg-color-2 ($vg-column-width * 2)
    );
}