section#tileArea{display:flex;min-height:100vh;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;gap:32px;color:#404040}.TileBox{--tile-unit:40px;--tile-gap:6px;display:grid;gap:var(--tile-gap);grid-auto-rows:var(--tile-unit)}.TileBox.x6{width:calc(6 * var(--tile-unit) + 5 * var(--tile-gap));grid-template-columns:repeat(6,var(--tile-unit))}.TileBox.x8{width:calc(8 * var(--tile-unit) + 7 * var(--tile-gap));grid-template-columns:repeat(8,var(--tile-unit))}@media screen and (max-width:370px){.TileBox.x8{--tile-unit:35px;--tile-gap:4px}}.tile{grid-column:span 2;grid-row:span 2;box-shadow:1px 1px 4px rgba(32,32,32,.22);transition:box-shadow .3s ease,transform .3s ease;cursor:pointer}.tile.custom{background-color:transparent;backdrop-filter:none;border:none;box-shadow:none;cursor:default}.tile:not(.custom):hover{transform:scale(var(--tile-hover-scale,1.07))}.tile.unclickable{cursor:default}.tile.large{--tile-hover-scale:1.04;grid-column:span 4;grid-row:span 4}.tile.medium{--tile-hover-scale:1.07;grid-column:span 2;grid-row:span 2}.tile.small{--tile-hover-scale:1.1;grid-column:span 1;grid-row:span 1}.tile.wide{--tile-hover-scale:1.05;grid-column:span 4;grid-row:span 2}