// Grid Overlay. Show the truth!
.gridOverlay {
  background: none;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  pointer-events: none;

  .container {
    position: relative;
    height: 100vh;
    outline: 1px solid rgba(#D81B60, 0.25);

    &::before,
    &::after {
      content: '';
      position: absolute;
      height: 100vh;
      @include spaceX(width, 1);
    }

    &::before {
      left: 0;
      top: 0;
      border-right: 1px dotted rgba(#D81B60, 0.25);
    }

    &::after {
      right: 0;
      top: 0;
      border-left: 1px dotted rgba(#D81B60, 0.25);
    }
  }

  .col {
    position: relative;
    height: 100vh;
    box-shadow: 1px 0px 0px 0px rgba(#4FC3F7, 0.25);
    width: calc(1/6 * 100%);

    &:first-child {
      box-shadow: -1px 0px 0px 0px rgba(#4FC3F7, 0.25), 1px 0px 0px 0px rgba(#4FC3F7, 0.25);
    }

    &:nth-child(n+7) {
      display: none;
    }

    @include media('>=s') {
      width: calc(1/12 * 100%);

      &:nth-child(n+7) {
        display: block;
      }

      &:nth-child(n+13) {
        display: none;
      }
    }

    @include media('>=m') {
      width: calc(1/24 * 100%);

      &:nth-child(n+13) {
        display: block;
      }
    }

    &::before,
    &::after {
      content: '';
      position: absolute;
      height: 100vh;
      @include spaceX(width, 0.5);
    }

    &::before {
      left: 0;
      top: 0;
      border-right: 1px dotted rgba(#4FC3F7, 0.25);
    }

    &::after {
      right: 0;
      top: 0;
      border-left: 1px dotted rgba(#4FC3F7, 0.25);
    }
  }
}