/* Liste courses */

.cards-list {
    display: grid;
    width: 100%;
    grid-template-columns: 23% 23% 23% 23%;
    grid-auto-rows: 150px;
    grid-row-gap: 2%;
    grid-column-gap: 1%;
    margin: 2%;
}

.card-race {
    background: var(--color-4);
    width: 100%;
    color: var(--color-1);
    border-radius: 1.5em;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 25;
}

.card-race:hover {
    background: var(--color-5);
    color: var(--color-2);
    transition: 150ms ease-in-out;
}



@media (max-width: 1024px)
{
    .cards-list {
        grid-template-columns: 30% 30% 30%;
        grid-column-gap: 2%;
        margin: 3%;
    }
}

@media (max-width: 768px)
{
    .cards-list {
        grid-template-columns: 45% 45%;
        grid-column-gap: 2%;
        grid-column-gap: 1%;
        margin: 4%;
    }
}