@import './util';

:root {
  --margin: 30rem;
  --gap: 20rem;
  --column: calc((var(--rvw) * 100 - var(--margin) * 2 - var(--gap) * 9) / 10);
  @media (max-width: 1024px) {
    --margin: 15px;
    --gap: 10rem;
    --column: calc((100vw - var(--margin) * 2 - var(--gap) * 5) / 6);
  }
}
#grid {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  padding: 0 var(--margin);
  box-sizing: border-box;
  z-index: 9999;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: auto;
  gap: var(--gap);
  pointer-events: none;
  div {
    background: rgba(red, 0.2);
  }
  &:not(.show) {
    display: none;
  }
  @media (max-width: 1024px) {
    grid-template-columns: repeat(6, 1fr);
    div:nth-child(7), div:nth-child(8), div:nth-child(9), div:nth-child(10) {
      display: none;
    }
  }
}