.bg-grid-system{--gap: 20px;position:relative;display:grid;background-position:calc(var(--gap) * -1) 0;--bg-size: calc(var(--gap) / 12);background-size:calc(8.33% + var(--bg-size));background-image:linear-gradient(90deg,transparent var(--gap),#ff000033 0);grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}.bg-stripes{background-color:#38bdf810;background-image:linear-gradient(135deg,#0ea5e944 10%,transparent 0,transparent 50%,#0ea5e980 0,#0ea5e980 60%,transparent 0,transparent);background-size:7.07px 7.07px}.dashed-grid-paper{--column-size: 100px;--row-size: 60px;--grid-strength: 2px;--grid-dash: 10px;--grid-gap: 5px;--grid-color: #aaa;--paper-color: #fff;background-position:-2px -2px;border:var(--grid-strength) dashed var(--grid-color);background-size:var(--grid-dash) var(--grid-dash),calc(var(--column-size) + 1px) calc(var(--row-size) + 1px);background-image:linear-gradient(to bottom,transparent var(--grid-gap),var(--paper-color) var(--grid-gap)),linear-gradient(to right,var(--grid-color) var(--grid-strength),transparent var(--grid-strength)),linear-gradient(to right,transparent var(--grid-gap),var(--paper-color) var(--grid-gap)),linear-gradient(to bottom,var(--grid-color) var(--grid-strength),transparent var(--grid-strength))}