/* ===== GRILLE RWD // S:4/M:12/L:12 ===== */


/* conteneurs */

.container {
    max-width: 1440px;
    width: 100%;
}

.flex_container {
    display: flex;
    flex-wrap: wrap;
}

/* marges flex */

.around {
    justify-content: space-around;
}

.between {
    justify-content: space-between;
}

.evenly {
    justify-content: space-evenly;
}

/* -- colonnes small mobile -- */

.col-s-4 {
    width: 79.44%;
    flex-basis: 79.44%;
}

.col-s-3 {
    width: 58.89%;
    flex-basis: 58.89%;
}

.col-s-2 {
    width: 38.33%;
    flex-basis: 38.33%;
}

.col-s-1 {
    width: 17.77%;
    flex-basis: 17.77%;
}

/* -- colonnes medium tablette -- */

@media screen and (min-width: 768px) {

    .col-m-12 {
        width: 85.42%;
        flex-basis: 85.42%;
    }

    .col-m-11 {
        width: 78.23%;
        flex-basis: 78.23%;
    }

    .col-m-10 {
        width: 71.04%;
        flex-basis: 71.04%;
    }

    .col-m-9 {
        width: 63.85%;
        flex-basis: 63.85%;
    }

    .col-m-8 {
        width: 56.66%;
        flex-basis: 56.66%;
    }

    .col-m-7 {
        width: 49.48;
        flex-basis: 49.48%;
    }

    .col-m-6 {
        width: 42.29%;
        flex-basis: 42.29%;
    }

    .col-m-5 {
        width: 35.10%;
        flex-basis: 35.10%;
    }

    .col-m-4 {
        width: 27.92%;
        flex-basis: 27.92%;
    }

    .col-m-3 {
        width: 20.73%;
        flex-basis: 20.73%;
    }

    .col-m-2 {
        width: 13.54%;
        flex-basis: 13.54%;
    }

    .col-m-1 {
        width: 6.35%;
        flex-basis: 6.35%;
    }

}

/* --- colonnes large desktop --- */

@media screen and (min-width: 1024px) {

    .col-l-12 {
        width: 85.42%;
        flex-basis: 85.42%;
    }

    .col-l-11 {
        width: 78.23%;
        flex-basis: 78.23%;
    }

    .col-l-10 {
        width: 71.04%;
        flex-basis: 71.04%;
    }

    .col-l-9 {
        width: 63.85%;
        flex-basis: 63.85%;
    }

    .col-l-8 {
        width: 56.66%;
        flex-basis: 56.66%;
    }

    .col-l-7 {
        width: 49.48;
        flex-basis: 49.48%;
    }

    .col-l-6 {
        width: 42.29%;
        flex-basis: 42.29%;
    }

    .col-l-5 {
        width: 35.10%;
        flex-basis: 35.10%;
    }

    .col-l-4 {
        width: 27.92%;
        flex-basis: 27.92%;
    }

    .col-l-3 {
        width: 20.73%;
        flex-basis: 20.73%;
    }

    .col-l-2 {
        width: 13.54%;
        flex-basis: 13.54%;
    }

    .col-l-1 {
        width: 6.35%;
        flex-basis: 6.35%;
    }

}

/* center */

.grid_center {
    margin: 0 auto;
}