:root {
  --columns: 80;
  --max: 1824px;
  --1: calc(var(--max) / var(--columns)); /* 24px */
  --2: calc(var(--1) * 2);
  --3: calc(var(--1) * 3);
  --4: calc(var(--2) * 2);
  --5: calc(var(--1) * 5);
  --6: calc(var(--1) * 6);
  --7: calc(var(--1) * 7);
  --8: calc(var(--1) * 8);
  --30: calc(var(--1) * 30);
  --narrow: 720px;
  --grid-image: conic-gradient(
      from 90deg at 1px 1px,
      #0000 90deg,
      currentColor 0
    ) -1px 0 / var(--1) var(--1);
  --vertical-outer: var(--6);
  --vertical-inner: var(--3);
}

@media (max-width: 1920px) {
  :root {
    --max: 100vw;
  }
}

@media (max-width: 500px) {
  :root {
    --columns: 24;
  }
}

@media (min-width: 769px) and (max-width: 1152px) {
  :root {
    --columns: 48;
  }
}

@media (min-width: 501px) and (max-width: 768px) {
  :root {
    --columns: 32;
  }
}