.genres-container{margin:30px 0}.genres-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:25px;margin-bottom:50px}.genre-card{position:relative;border-radius:10px;overflow:hidden;transition:transform 0.3s ease,box-shadow 0.3s ease;height:180px}.genre-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,.3),0 0 10px var(--primary)}.genre-card-image{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center}.genre-card-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgba(0,0,0,.3) 0%,rgba(0,0,0,.8) 100%);transition:background 0.3s ease}.genre-card:hover .genre-card-overlay{background:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.9) 100%)}.genre-card-title{position:absolute;bottom:40px;left:20px;right:20px;margin:0;color:#fff;font-size:1.5rem;font-weight:700;z-index:2;transition:transform 0.3s ease}.genre-card:hover .genre-card-title{transform:translateY(-5px)}.genre-card-count{position:absolute;bottom:15px;left:20px;color:var(--text-secondary);font-size:.9rem;z-index:2}.page-header{margin-bottom:30px}.page-title{font-size:2.5rem;margin-bottom:15px;display:flex;align-items:center;gap:10px}.genre-count{font-size:1.2rem;color:var(--text-secondary);font-weight:400}.genre-description{color:var(--text-secondary);margin-bottom:20px;font-size:1.1rem;line-height:1.6}@media (max-width:768px){.genres-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px}.genre-card{height:150px}.genre-card-title{font-size:1.2rem;bottom:35px}.page-title{font-size:2rem}}@media (max-width:480px){.genres-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.genre-card{height:120px}.genre-card-title{font-size:1rem;bottom:30px;left:15px}.genre-card-count{font-size:.8rem;left:15px}.page-title{font-size:1.8rem}}