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;

}

.portail {
    padding-top: 60px;
    padding-bottom: 110px;
}

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

.contenu {
    font-size: 5.5vw;
    padding-bottom: 50px;
    padding-top: 10px;
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 1fr;
    grid-auto-rows: minmax(100px, auto);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-areas:
        ". ar1 ar1 ."
        ". ar2 ar2 ."
}

#ar1 {
    grid-area: ar1;

}

#ar2 {
    grid-area: ar2;
}

.bouton {
    display: flex;
    justify-content: center;
}

.texteBouton {
    text-decoration: none;
    color: gray;
    font-family: 'Gemunu Libre', sans-serif;
    font-size: 5.8vw;
    opacity: 0.5;
}

.texteBouton:hover {
    opacity: 1;
}

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

    .contenu {
        font-size: 2vw;
        padding-bottom: 50px;
        padding-top: 30px;
        display: grid;
        grid-template-columns: 1fr 3fr 3fr 1fr;
        grid-auto-rows: minmax(100px, auto);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        grid-template-areas:
            ". ar1 ar2 ."
    }


    #article-1 {
        grid-area: ar1;
    }

    #article-2 {
        grid-area: ar2;
    }

    .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;
        font-size: 1.8vw;
    }

    a {
        text-decoration: none;
    }

    .bouton {
        display: flex;
        justify-content: center;
    }

    .texteBouton {
        text-decoration: none;
        color: gray;
        font-family: 'Gemunu Libre', sans-serif;
        font-size: 2vw;
        opacity: 0.5;
    }

    .texteBouton:hover {
        opacity: 1;
    }

}