.genre-slider-track { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; padding:4px 0; }
.genre-slider-card { position:relative; flex:0 0 calc((64% - 10.24px)/2); aspect-ratio:375/538; overflow:hidden; border:1px solid #d4d4d8; border-radius:12px; background:#e4e4e7; scroll-snap-align:start; box-shadow:0 1px 2px #0001; }
.genre-slider-card:hover, .genre-slider-card:focus-visible { border-color:#f43f5e; }
.genre-slider-card img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
.genre-slider-title { position:absolute; inset:auto 0 0; padding:12px; background:rgba(63,63,70,.85); color:white; font-size:14px; line-height:1.5; max-height:100%; overflow-y:auto; opacity:0; transition:opacity .15s; }
.genre-slider-card:hover .genre-slider-title, .genre-slider-card:focus-visible .genre-slider-title { opacity:1; }
.dark .genre-slider-card { border-color:#27272a; background:#27272a; }
@media(min-width:768px) { .genre-slider-card { flex-basis:calc((64% - 20.48px)/3); } }
@media(min-width:1024px) { .genre-slider-card { flex-basis:calc((64% - 30.72px)/4); } }
@media(min-width:1280px) { .genre-slider-card { flex-basis:calc((64% - 51.2px)/6); } }
@media(prefers-reduced-motion:reduce) { .genre-slider-title { transition:none; } }