/*fait par Lucas Grossrieder le 13.01.*/

section {
    /*je met en row pour créer une ligne avec les deux artistes que j'espace avec un space between
    et un gap*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20rem;
    
}
main {
    /*je met mes deux lignes (sections) en colonne pour qu'elles s'empilent et met un petit espace
    entre les deux*/
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 20px;
 

}
div {
    /*je centre tous mes items et et les empilent avec un petit espace*/
    display: flex;
    align-items: center;
    gap: 15px;
    flex-direction: column;
}

/*J'applique ces réglages pour les écrans plus petits que 600px*/
@media (max-width : 600px){
    section {
    /*j'empilent ensuite mes deux divs */
    flex-direction: column;
    gap: 2rem;
}
main {
    /*et je m'assure d'avoir centré mes items dans le main */
    display: flex;
    align-items: center;
}

div {
    /*je centre aussi le texte*/
    text-align: center;
}
/*je rétrécit aussi la taille max des images car elles prenaient un peu trop de place*/
img,article {
    max-width: 325px;
}
}