:root{--cols:12;--bl:8px;--lh:24px;--gutter:24px;--grid-col-ink:#e4002b59;--grid-col-fill:#e4002b0d;--grid-row-ink:#00968c57;--grid-row-ink-soft:#00968c1f}.grid-guides{pointer-events:none;z-index:997;width:100%;display:none;position:absolute;top:0;left:0}body.grid-on .grid-guides{display:block}.grid-guides .rows{background-image:repeating-linear-gradient(to bottom, var(--grid-row-ink) 0 1px, transparent 1px var(--lh)), repeating-linear-gradient(to bottom, var(--grid-row-ink-soft) 0 1px, transparent 1px var(--bl));position:absolute;inset:0}.grid-guides .cols{width:min(var(--container-max), 100% - (var(--container-pad) * 2));grid-template-columns:repeat(var(--cols), minmax(0, 1fr));column-gap:var(--gutter);counter-reset:col;display:grid;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.grid-guides .col{background:var(--grid-col-fill);border-left:1px solid var(--grid-col-ink);border-right:1px solid var(--grid-col-ink);counter-increment:col}.grid-guides .col:before{content:counter(col);padding:var(--bl) 0 0 var(--bl);font-family:var(--font-body);color:var(--grid-col-ink);font-size:10px;line-height:16px;display:block;position:sticky;top:0}