:root{--size:1vw}*{box-sizing:border-box}@font-face{font-family:Mona Sans;src:url(https://assets.codepen.io/64/Mona-Sans.woff2) format("woff2 supports variations"),url(https://assets.codepen.io/64/Mona-Sans.woff2) format("woff2-variations");font-weight:100 1000}body,html{width:100%;mih-height:100%;padding:0;margin:0;font-family:Mona Sans,sans-serif;font-size:16px;background:#000;color:#fff}.controls{padding:2em 1em}.grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:32px;padding:2em}.block{display:grid;grid-template-columns:repeat(2,1fr)}.block,.visual{position:relative}.visual{width:calc((var(--size)) * 33.4);height:calc((var(--size)) * 33.4);border:3px solid blue;z-index:999;transform:scale(1.1) translateY(10%)}.block .controls{padding:1em;display:flex;background:hsla(0,0%,100%,.3)}.block .controls label{display:inherit}.img{width:calc(var(--size) / 3);height:calc(var(--size) / 3);opacity:1;position:absolute;top:0;left:0;margin:auto;display:grid;will-change:box-shadow;transform:scale(1.015);box-shadow:var(--all-shadows)}pre{white-space:break-spaces}