/* =========================================================
   HOME
========================================================= */


/* =========================================================
   INTRO
========================================================= */

.page-title {
    margin: 0 0 24px;

    font-size: 28px;
    line-height: 1.2;

    letter-spacing: -.6px;
}


.page-subtitle {
    margin: -16px 0 28px;

    color: var(--text-soft);

    font-size: 15px;
}


/* =========================================================
   GRILLE PRINCIPALE
========================================================= */

.grid {
    display: grid;

    grid-template-columns:
        minmax(0, 7fr)
        minmax(300px, 3fr);

    gap: 28px;

    align-items: start;
}


/* =========================================================
   JEUX MIS À JOUR
========================================================= */

.updated-games {
    grid-template-columns:
        repeat(8, minmax(0, 1fr));

    margin-bottom: 10px;
}


/* =========================================================
   DERNIERS JEUX AJOUTÉS
========================================================= */

.newest-games {
    grid-template-columns:
        repeat(7, minmax(0, 1fr));
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .updated-games {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));
    }

    .newest-games {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));
    }

}


@media (max-width: 900px) {

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

    .updated-games {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .newest-games {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


@media (max-width: 600px) {

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

}