.hero-previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 34px; }
.hero-preview-card { position: relative; display: block; aspect-ratio: 1; min-width: 0; overflow: hidden; color: #fff; background: #0e1111; border: 0 !important; text-decoration: none; }
.hero-preview-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease, opacity .28s ease; }
.hero-preview-card::after { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .82)); pointer-events: none; }
.hero-preview-card span { position: absolute; z-index: 1; left: 12px; right: 10px; bottom: 10px; color: #fff; font-family: "Arial Black", Arial, sans-serif; font-size: .72rem; letter-spacing: .035em; line-height: 1.1; text-transform: uppercase; }
.hero-preview-card:hover { background: #0e1111 !important; }
.hero-preview-card:hover img { opacity: .88; transform: scale(1.045); }
.hero-preview-card:focus-visible { outline: 3px solid #e21f2f; outline-offset: 3px; }

@media (max-width: 1060px) {
    .hero-previews { gap: 5px; }
    .hero-preview-card span { left: 8px; bottom: 8px; font-size: .62rem; }
}

@media (max-width: 820px) {
    .hero-previews { margin-bottom: 28px; }
    .hero-preview-card span { font-size: .72rem; }
}

@media (max-width: 480px) {
    .hero-preview-card span { left: 6px; bottom: 6px; font-family: Arial, sans-serif; font-size: .58rem; font-weight: 900; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-preview-card img { transition: none; }
}