.glass-tile{--s:4.5rem;width:var(--s);height:var(--s);perspective:24em;flex-shrink:0;display:block;position:relative}@media (width>=640px){.glass-tile{--s:6rem}}@media (width>=1024px){.glass-tile{--s:8rem}}.glass-tile__back,.glass-tile__front{border-radius:calc(var(--s) * .28);transition:transform .3s cubic-bezier(.83,0,.17,1);position:absolute;inset:0}.glass-tile__back{transform-origin:100% 100%;box-shadow:.3em -.3em .7em color-mix(in oklab, var(--shadow-c) 30%, transparent);display:block;transform:rotate(8deg)}.glass-tile__front{transform-origin:80%;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff29;display:flex;box-shadow:inset 0 0 0 1px #fff6,inset 0 1px #ffffff80}.glass-tile__icon{color:#fff;filter:drop-shadow(0 2px 3px #291a0a73);width:44%;height:44%;margin:auto;display:flex}.glass-tile__icon>svg{width:100%;height:100%}.group:hover .glass-tile__back,.group:focus-within .glass-tile__back{transform:rotate(15deg)translate3d(-.3em,-.3em,.4em)}.group:hover .glass-tile__front,.group:focus-within .glass-tile__front{transform:translateZ(2em)}.glass-tile--solo .glass-tile__front{background:color-mix(in oklab, var(--gold) 38%, transparent);box-shadow:0 0 0 1px color-mix(in oklab, var(--gold-accent) 55%, transparent) inset, 0 1px 0 color-mix(in oklab, var(--gold-accent) 60%, transparent) inset, 0 0 2.2rem color-mix(in oklab, var(--gold) 45%, transparent), 0 0 .6rem color-mix(in oklab, var(--gold) 35%, transparent);-webkit-backdrop-filter:blur(16px)saturate(170%);backdrop-filter:blur(16px)saturate(170%)}.glass-tile--solo .glass-tile__icon{color:color-mix(in oklab, var(--gold) 45%, #2b1c00);filter:drop-shadow(0 1px 2px #fcf1cf80)}.dark .glass-tile--solo .glass-tile__icon{color:var(--gold-accent);filter:drop-shadow(0 0 6px color-mix(in oklab, var(--gold) 60%, transparent))}.glass-tile--solo:hover .glass-tile__front,.group:hover .glass-tile--solo .glass-tile__front{transform:translateZ(2em)scale(1.03)}