/* ==========================================================================
   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)

  &:before, &:after
    content: ''
    position: absolute
    top: 0
    width: calc(100% / 12)
    height: 100%
    background: rgba(0,255,0,.5)

  &:before
    left: calc(-100% / 12)

  &:after
    right: calc(-100% / 12)

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