:root{--size: 500px;--cell-size: 30%;--gap: 5px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{font-family:monospace;background-color:#666;display:flex;justify-content:center;align-items:center;height:100vh}.playground{position:relative;width:var(--size);height:var(--size);margin:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cell-size),1fr));grid-gap:var(--gap);justify-content:center;align-content:center;background-color:#000}.cell:before{content:"";display:block;padding-top:100%}.cell{background-color:#fff;background-size:contain;background-repeat:no-repeat;background-position:center;cursor:pointer}.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)}