/* https://css-tricks.com/building-css-grid-overlay/ */
:root {
  --grid-repeating-width: calc(100% / var(--columns));
  --grid-column-width: calc((100% / var(--columns)) - var(--gutter));
  --grid-background-width: calc(100% + var(--gutter));
  --grid-background-columns: repeating-linear-gradient(
    to right,
    var(--grid-color),
    var(--grid-color) var(--grid-column-width),
    transparent var(--grid-column-width),
    transparent var(--grid-repeating-width)
  );
}

html {
  position: relative;
}

html::before {
  content: "";

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin-right: auto;
  margin-left: auto;

  width: calc(100% - (2 * var(--offset)));
  max-width: var(--max-width);
  min-height: 100vh;
  background-image: var(--grid-background-columns);
  background-size: var(--grid-background-width) 100%;
  z-index: 1000;
  pointer-events: none;
}