.brands-index{margin:0}.brands-index__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(12px,1.6vw,20px);margin:0;padding:0;list-style:none}.brands-index__list>li{min-width:0;margin:0}.brand-tile{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--brand-line);color:var(--brand-ink);text-decoration:none;transition:transform .16s ease,box-shadow .16s ease}.brand-tile:hover{color:var(--brand-ink);text-decoration:none}.brand-tile:focus-visible{outline:3px solid var(--brand-gold);outline-offset:3px}.brand-tile__stage{position:relative;display:block;aspect-ratio:5 / 4;background:radial-gradient(circle at 50% 46%,#fff 0,#fff0 62%),var(--brand-paper)}.brand-tile__tin{--tin-rotate: 8deg;--tin-float: -10px;position:absolute;top:10%;left:18%;width:64%;aspect-ratio:1;mix-blend-mode:multiply;animation:brandTinFloat 6s ease-in-out infinite}.brands-index__list>li:nth-child(2n) .brand-tile__tin{--tin-rotate: -10deg;--tin-float: -13px;animation-duration:7s}.brands-index__list>li:nth-child(3n) .brand-tile__tin{--tin-rotate: -3deg;--tin-float: -8px;animation-duration:6.5s}.brand-tile__img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;border-radius:0;animation:brandTinPop .8s cubic-bezier(.34,1.56,.64,1) both}.brand-tile__img.is-entering{animation:brandTinSwapIn .82s cubic-bezier(.34,1.56,.64,1) .18s both}.brand-tile__img.is-leaving{animation:brandTinSwapOut .42s cubic-bezier(.55,0,.8,.2) forwards}.brand-tile__name{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-top:1px solid var(--brand-line);font-family:var(--brand-display);font-size:26px;font-weight:700;line-height:1;text-transform:uppercase;overflow-wrap:anywhere}.brand-tile__name:after{content:"→";flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:6px;background:var(--brand-paper);font-size:17px;transition:background-color .15s ease,color .15s ease}@media (hover: hover){.brand-tile:hover{box-shadow:0 0 0 3px var(--brand-ink);transform:translateY(-3px)}.brand-tile:hover .brand-tile__name:after{background:var(--brand-ink);color:var(--brand-gold)}}@media (max-width: 760px){.brands-index__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.brand-tile__name{padding:11px 12px;font-size:20px}.brand-tile__name:after{width:26px;height:26px;font-size:15px}}@media (prefers-reduced-motion: reduce){.brand-tile,.brand-tile__tin,.brand-tile__img{animation:none;transition:none}.brand-tile__tin{transform:rotate(var(--tin-rotate))}}