/* ==========================================================================
   This grid can be turned on and off when you want to check
   if everything is nice in place.
   ========================================================================== */

.visible-grid-container
  display: flex
  justify-content: center

/**
 * 1. Makes it able to control the website while grid is shown
 */
.visible-grid
  display: block
  position: fixed
  z-index: 10000
  pointer-events: none /* 2 */

  .grid-col
    background: rgba(0,255,255,.6)
    height: 100vh

    &:nth-child(2n)
      background: rgba(0,255,255,.3)

    &:nth-child(1),&:nth-child(14)
      background: rgba(0,255,0,.5)