/* adaptation selon la taille d'ecran */
@media screen and (min-width: 64em) {
    .logo-container-grid {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        grid-gap: 10px;

        
    }
    .logo-item {
        /* horizontally */
        width: auto;
        padding: 10px;
        height:6rem !important;
        margin: 3rem 10px 3rem 2px;
    }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
    .logo-container-grid {
        display: grid;
        grid-template-columns: 33% 33% 33%;
        grid-gap: 10px;

    }
    .logo-item {
        /* horizontally */
        width: auto;
        padding: 10px;
        height:5rem !important;
        margin: 2rem 10px 2rem 2px;
    }
}

@media screen and (max-width: 42em) {
    .logo-container-grid {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-gap: 10px;

    }
    .logo-item {
        /* horizontally */
        width: auto;
        padding: 10px;
        height:4rem !important;
        margin: 1rem 10px 1rem 2px;
    }
}

@media screen and (max-width: 12em) {
    .logo-container-grid {
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 10px;

    }

    .logo-item {
        /* horizontally */
        width: auto;
        padding: 10px;
        height:3rem !important;
        margin: 1rem 10px 1rem 2px;
    }
}


.logo-item {
    /* horizontally */
    width: auto;
    padding: 10px;
    max-height:6rem;
    margin: 3rem 1rem 3rem 2px;
}