.slide-board{--size: 4;display:grid;grid-template-columns:repeat(var(--size),1fr);gap:4px;max-width:620px;aspect-ratio:1;border:4px solid #486f5d;background-color:#d7e6dc;background-image:var(--picture);background-size:cover;box-shadow:0 12px 24px #4f3e272f}.slide-tile{min-height:0;aspect-ratio:1;border:0;border-radius:8px;background-color:#fff7e5;background-image:var(--picture);background-size:calc(var(--size) * 100%) calc(var(--size) * 100%);background-position:calc(var(--x) * 100% / (var(--size) - 1)) calc(var(--y) * 100% / (var(--size) - 1));color:#fff;font-weight:900;text-shadow:0 1px 4px #2f211a,0 0 2px #000;box-shadow:inset 0 0 0 2px #fff8dcaa}.slide-tile:hover{filter:brightness(1.04);transform:translateY(-1px)}.slide-tile.empty{visibility:hidden}.picture-0{--picture: url(/assets/art/slides/0.svg)}.picture-1{--picture: url(/assets/art/slides/1.svg)}.picture-2{--picture: url(/assets/art/slides/2.svg)}.picture-3{--picture: url(/assets/art/slides/3.svg)}.slide-board.preview .slide-tile{opacity:0}.slide-board.preview{outline:5px solid #efc75e;outline-offset:3px}@media(max-width:600px){.slide-board{gap:2px;padding:5px}.slide-tile{border-radius:4px}}
