:root {
    --overview-grid-gap--horizontal: 8rem;
    --overview-grid-gap--vertical: 5.5rem;
}

.overview-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
    row-gap: 5rem;
}

/* mobile */
@media (min-width: 700px) {
    .overview-grid{
        grid-template-columns: repeat(3, 1fr);
        column-gap: var(--overview-grid-gap--horizontal);
    }
}

/* desktop intermédiaire */
@media (min-width: 850px) {
    .overview-grid{
        grid-template-columns: repeat(4, 1fr);
        column-gap: var(--overview-grid-gap--horizontal);
    }
}

/* desktop */
@media (min-width: 1160px) {
    .overview-grid{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        column-gap: var(--overview-grid-gap--horizontal);
        row-gap: var(--overview-grid-gap--vertical);
    }
}