/* CSS pour la page Groupe d'eau glacée */

body
{
    display: flex; 
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    font-size: x-large;
}

h2
{
    text-align: center;
    text-decoration: none;
    margin-bottom: 1%;
}



section
{
    display: flex;
    flex-direction: row;
    
    width:100%;
}
aside{
    
    width: fit-content;
    width: 90%;
    height: 100%;
    padding: 3%;
}
#gauche aside {
    border: 2px green solid;
}
#droite aside{
    border: 2px blue solid;
}
article
{
    display:flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}



.flechegauchehaut
{
    transform: rotate(135deg);
    margin-left: 25%;
    width: 8%;
}

.flechegauche
{
    transform: rotate(90deg);
    margin-left: 18%;
    width: 10%;
}

.flechedroitehaut
{
    transform: rotate(45deg);
    margin-right: 25%;
    width: 8%;
}

.flechedroite
{
    transform: rotate(90deg);
    margin-right: 18%;
    width: 10%;
}

section .fleche
{
    display: flex;
}
.haut img{
    width: 45%;
    margin:3%; 
}
.image{
        display: flex;
            justify-content: space-between;
}
.image img{

    width:28%;

}



@media screen and (max-width:576px) 
{
    body 
    {
        font-size: large;
    }
    
    header, section
    {
        width: auto;
    }
    .flechegauchehaut
{
    display:none;
}
.flechedroitehaut
{
   display:none;
}
section{
    display: flex;
    flex-direction: column;
}
article{
    margin-bottom: 20%;
}
.haut img{
    width: 100%;
 
}
.image{
        display: flex;
        
}
.image img{

    width:100%;
margin-bottom: 5%;
}
   
}