/* ==========================================================
   GENRES SECTION
========================================================== */

.genres-section .section-header {
    margin-bottom: clamp(2rem, 4vw, 3rem);

    text-align: center;
}


/* ==========================================================
   GENRE GRID
========================================================== */

.genre-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: clamp(1rem, 2vw, 1.5rem);
}

.genre-card :where(.is-layout-flow) > :first-child {
    margin-block-start: revert;
}


/* First row: 3 cards */

.genre-grid > * {
    grid-column: span 2;
}


/* Second row: 2 centered cards */

.genre-grid > :nth-child(4) {
    grid-column: 2 / span 2;
}

.genre-grid > :nth-child(5) {
    grid-column: 4 / span 2;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

    .genre-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .genre-grid > * {
        grid-column: auto !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .genre-grid {
        grid-template-columns: 1fr;
    }

}