body {
    margin: auto;
}

header {
    position: relative;
    background-color: #E50828;
    text-align: center;
}

#logoHeader {
    height: 100px;
    width: 100px;
}

.element {
    display: flex;
    justify-content: space-around;
    font-size: 5.8vw;
    color: white;
}

.sousCategorie {
    display: flex;
    justify-content: space-around;
    font-size: 5vw;
    padding: 18px;
    color: black;
    background-color: #E2E2E2;
    font-family: 'Gemunu Libre', sans-serif;
    font-weight: bold;
    text-align: center;
}

p {
    font-family: 'Gemunu Libre', sans-serif;
    color: black;
    font-size: 5.8vw;
    text-align: center;
}

.portail {
    padding-top: 15px;
    padding-bottom: 15px;
}

.img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

.img:hover {
    outline: 3px solid #E50828;
}

span {
    max-height: 130%;
    max-width: 130%;
}

.contenu {
    text-align: center;

}

@media screen AND (min-width:480px) {

    .contenu {
        font-size: 2vw;
        padding: 10px;
        display: grid;
        grid-template-columns: 3fr 3fr 3fr;
        grid-auto-rows: minmax(100px, auto);
        grid-column-gap: 15px;
        grid-row-gap: 20px;
        grid-template-areas:
            "ar1 ar2 ar3";
            "ar4 ar5 ar6";
            "ar7 ar8 ar9";
            "ar10 ar11 ar12";
            "ar13 ar14 ar15";
            "ar16 ar17 ar18";
            "ar19 ar20 ar21";
            "ar22 ar23 ar24";
    }

    #ar1 {
        grid-area: ar1;
    }

    #ar2 {
        grid-area: ar2;
    }

    #ar3 {
        grid-area: ar3;
    }

    #ar4 {
        grid-area: ar4;
    }

    #ar5 {
        grid-area: ar5;
    }

    #ar6 {
        grid-area: ar6;
    }

    #ar7 {
        grid-area: ar7;
    }

    #ar8 {
        grid-area: ar8;
    }

    #ar9 {
        grid-area: ar9;
    }

    #ar10 {
        grid-area: ar10;
    }

    #ar11 {
        grid-area: ar11;
    }

    #ar12 {
        grid-area: ar12;
    }

    #ar13 {
        grid-area: ar13;
    }

    #ar14 {
        grid-area: ar14;
    }

    #ar15 {
        grid-area: ar15;
    }

    #ar16 {
        grid-area: ar16;
    }

    #ar17 {
        grid-area: ar17;
    }

    #ar18 {
        grid-area: ar18;
    }

    #ar19 {
        grid-area: ar19;
    }

    #ar20 {
        grid-area: ar20;
    }

    #ar21 {
        grid-area: ar21;
    }

    #ar22 {
        grid-area: ar22;
    }

    #ar23 {
        grid-area: ar23;
    }

    #ar24 {
        grid-area: ar24;
    }

    .element {
        display: flex;
        justify-content: space-around;
        font-size: 2.7vw;
        color: white;
    }

    .sousCategorie {
        display: flex;
        justify-content: space-around;
        font-size: 2vw;
        padding: 18px;
        color: black;
        background-color: #E2E2E2;
        font-family: 'Gemunu Libre', sans-serif;
        text-align: center;
    }

    p {
        font-family: 'Gemunu Libre', sans-serif;
        color: black;
        font-size: 2vw;
        text-align: center;
    }

    a {
        text-decoration: none;
    }