.gridHolder {
position:fixed;
top:0;
left:0;
width:100vw;
height:100dvh;
z-index:999999998;
pointer-events:none;
}
.gridActivator {
position:fixed;
top:10px;
left:10px;
cursor:pointer;
z-index:2;
pointer-events:initial;
display:flex;
align-items:center;
}
.gridMeasures {
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:10px;
line-height:16px;
color:#000000;
margin-left:10px;
opacity:0;
pointer-events:none;
-webkit-transition:all 200ms ease;
-moz-transition:all 200ms ease;
-ms-transition:all 200ms ease;
-o-transition:all 200ms ease;
transition:all 200ms ease;
}
.showGrid .gridMeasures {
opacity:1;
}
.gridActivator svg {
width:20px;
height:auto;
}
.gridWrapper {
position:absolute;
top:0;
left:50%;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-ms-transform:translateX(-50%);
-o-transform:translateX(-50%);
transform:translateX(-50%);
width:calc(100vw * var(--gridWidthReference) / var(--viewportWidthReference));
height:100dvh;
z-index:1;
opacity:0;
-webkit-transition:all 200ms ease;
-moz-transition:all 200ms ease;
-ms-transition:all 200ms ease;
-o-transition:all 200ms ease;
transition:all 200ms ease;
display:flex;
justify-content:space-between;
}
.showGrid .gridWrapper {
opacity:1;
}
.gridColumn {
position:relative;
background-color:#00FFFF;
opacity:0.25;
width:var(--gridColumnWidth);
display:block;
}
.gridColumn_text {
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:10px;
line-height:16px;
width:100%;
text-align:center;
margin-top:40px;
color:#000000;
}