#reference-hero{height:400px;container-type:inline-size}
#reference-hero .hero-backdrop{display:block;width:100%;height:100%}
#reference-hero .hero-image{width:100%;height:100%;object-fit:cover;object-position:center}
#reference-hero .reference-slide:after{pointer-events:none;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 25%,rgba(0,0,0,.65) 65%,rgba(0,0,0,.8) 100%)}
.hero-collection-link{position:absolute;inset:0;z-index:1}
#reference-hero .reference-hero-content{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;pointer-events:none;left:20px;right:20px;bottom:20px}
#reference-hero .reference-hero-content a{pointer-events:auto}
.hero-summary{min-width:0}
#reference-hero h1{font-size:32px;font-weight:600;line-height:1.2;margin:0 0 6px;letter-spacing:-.5px}
#reference-hero .hero-author{font-size:14px;line-height:20px;color:#eee;font-weight:500;margin:0 0 12px}
#reference-hero .author-verified{width:12px;height:12px;font-size:8px;background:#969696}
#reference-hero .reference-stats{width:max-content;max-width:100%;padding:12px 0;background:#ffffff1a;border:1px solid #ffffff26;backdrop-filter:blur(24px)}
#reference-hero .reference-stats>div{padding:0 16px}
#reference-hero .reference-stats small{text-transform:uppercase;font-size:12px;font-weight:600;line-height:16px;margin-bottom:8px;color:#aaa}
#reference-hero .reference-stats strong{font-size:14px;line-height:18px;color:white;white-space:nowrap}
#reference-hero .hero-thumbs{display:flex;flex:none;gap:12px;overflow:visible}
#reference-hero .hero-thumbs a{display:block;width:80px;height:80px;border-radius:8px;border:1px solid #ffffff26;overflow:hidden;background:#151718;transition:transform .2s}
#reference-hero .hero-thumbs img,#reference-hero .hero-thumbs video{display:block;width:100%;height:100%;object-fit:cover}
#reference-hero .hero-thumbs a:hover{transform:translateY(-2px) scale(1.01)}
@container(max-width:760px){#reference-hero .hero-thumbs a{width:60px;height:60px}#reference-hero .hero-thumbs{gap:8px}#reference-hero .reference-stats>div{padding:0 10px}}
@container(max-width:620px){#reference-hero .reference-hero-content{flex-wrap:wrap;gap:12px;left:12px;right:12px;bottom:12px}#reference-hero h1{font-size:26px}#reference-hero .reference-stats>div{padding:0 8px}#reference-hero .reference-stats small{font-size:9px}#reference-hero .reference-stats strong{font-size:11px}#reference-hero .hero-thumbs a{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){#reference-hero .hero-thumbs a{transition:none}}

#reference-hero .hero-thumbs a:active{transform:scale(1.005)}