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;
}


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

.img:hover {
    transform: scale(1.05);
}

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

.contenu {
    font-size: 5.5vw;
    padding: 10px;
}

@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";
    }

    #ar1 {
        grid-area: ar1;
    }

    #ar2 {
        grid-area: ar2;
    }

    #ar3 {
        grid-area: ar3;
    }


    .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;
    }