.grid::before {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  pointer-events: none;
  z-index: 100;

  --grid-sides: 50px;
  --grid-gutter: 50px;
  --grid-colums: 12;
  --grid-color: rgb(1 1 1 / 0.1);
  --grid-column-width: calc((100% - var(--grid-gutter) * var(--grid-colums)) / var(--grid-colums));

  border: solid transparent;
  border-width: 0 calc(var(--grid-sides) - var(--grid-gutter) / 2);

  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(var(--grid-gutter) / 2),
    var(--grid-color) calc(var(--grid-gutter) / 2),
    var(--grid-color) calc(var(--grid-column-width) + var(--grid-gutter) / 2),
    transparent calc(var(--grid-column-width) + var(--grid-gutter) / 2),
    transparent calc(var(--grid-column-width) + var(--grid-gutter))
  );
  background-repeat: no-repeat;
}

@media (max-width: 1200px) {
  .grid::before {
    --grid-sides: 40px;
    --grid-gutter: 40px;
  }
}