.grid {
    position: relative;
}

.grid::before {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    pointer-events: none;
    --grid-color: rgb(255 0 0 / 0.2);
    --grid-sides: 20px;
    --grid-gutter: 20px;
    --grid-columns: 12;
    --grid-column-width: calc( (100% - var(--grid-gutter) * var(--grid-columns)) / var(--grid-columns));
    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;
    max-width: 1340px;
    margin: auto;
    z-index: 10;
}