:root {
  --margin: 56rem;
  --gap: 20rem;
  --column: calc((var(--rvw) * 100 - var(--margin) * 2 - var(--gap) * 11) / 12);
}
#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(12, 1fr);
  grid-template-rows: auto;
  gap: var(--gap);
  pointer-events: none;
}
#grid div {
  background: rgba(255, 0, 0, 0.2);
}
#grid:not(.show) {
  display: none;
}
@media (max-width: 740px) {
  :root {
    --margin: 16px;
  }
}
@media (max-width: 580px) {
  #grid {
    grid-template-columns: repeat(6, 1fr);
  }
  #grid div:nth-child(7), #grid div:nth-child(8), #grid div:nth-child(9), #grid div:nth-child(10), #grid div:nth-child(11), #grid div:nth-child(12){
    display: none;
  }
}