:root{--size:500px;--cell-size:30%;--gap:5px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background-color:#666;justify-content:center;align-items:center;height:100vh;font-family:monospace;display:flex}.playground{width:var(--size);height:var(--size);grid-template-columns:repeat(auto-fill, minmax(var(--cell-size), 1fr));grid-gap:var(--gap);background-color:#000;place-content:center;margin:auto;display:grid;position:relative}.cell:before{content:"";padding-top:100%;display:block}.cell{cursor:pointer;background-color:#fff;background-position:50%;background-repeat:no-repeat;background-size:contain}.cell.empty:hover{background-color:pink}.cell.o{background-image:url(/images/game-xo/o.svg)}.cell.x{background-image:url(/images/game-xo/x.svg)}