*{box-sizing:border-box}body{background:#fafafa;margin:0;font-family:system-ui,sans-serif}#gallery{background:#1c1c1c;justify-content:center;align-items:center;min-height:100vh;display:flex}.card{perspective:1000px;width:400px;height:300px;text-decoration:none;display:block}.card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s;position:relative}.card:hover .card-inner,.card:focus-visible .card-inner{transform:rotateY(180deg)}.card-face{backface-visibility:hidden;border-radius:12px;position:absolute;inset:0;overflow:hidden}.card-front img{object-fit:cover;width:100%;height:100%}.card-back{color:#fff;background:#b3261e;place-items:center;display:grid;transform:rotateY(180deg)}@media (hover:none){.card-inner{transform:none!important}.card-back{display:none}}.tile-grid{grid-template-rows:repeat(3,120px);grid-template-columns:repeat(3,120px);margin:0;display:grid;transform:rotate(45deg);gap:-10px!important}.tile{clip-path:polygon(38% 4%,62% 4%,62% 22%,78% 22%,78% 38%,96% 38%,96% 62%,78% 62%,78% 78%,62% 78%,62% 96%,38% 96%,38% 78%,22% 78%,22% 62%,4% 62%,4% 38%,22% 38%,22% 22%,38% 22%);background:#b3261e;justify-content:center;align-items:center;margin-top:-30px;text-decoration:none;transition:opacity .25s,filter .25s,transform .25s;display:flex;position:relative;overflow:hidden;transform:rotate(225deg)}.tile:hover{z-index:2;background:#d13b30}.tile-label{z-index:1;color:#fff;text-align:center;opacity:0;pointer-events:none;padding:8px;font-size:13px;font-weight:600;transition:opacity .25s;position:relative;transform:rotate(90deg)}.tile:before{content:"";background-image:var(--hover-image);opacity:0;background-position:50%;background-size:cover;transition:opacity .3s;position:absolute;inset:0;transform:rotate(-45deg)scale(1.6)}.tile:hover .tile-label{opacity:1}.tile.empty{pointer-events:none;background:0 0}