.grid-container {
  @include grid-container;
}

.grid-column-container {
  @include grid-column-container;
}

:root {
  --gridColumnNumber: #{$column-number-mobile};
}

body {
  @include breakpoint-sm {
    --gridColumnNumber: #{$column-number-desktop};
  }
}

.dev-grid {
  @include grid-container;

  opacity: 0.1;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 100%;
  z-index: 9999;
  justify-content: space-between;
  align-items: stretch;
  pointer-events: none;
  background-color: transparent;
  display: flex;
  // display: none;

  .container {
    @include grid-column-container;
  }

  span {
    @include grid-column(1);

    display: block;
    background-color: palevioletred;
    opacity: 0.7;

    @include breakpoint-sm-down {
      &:nth-child(#{$column-number-mobile}) {
        & ~ span {
          display: none;
        }
      }
    }
  }
}