/*fait par Lucas Grossrieder le 13.01.*/

div {
    display: flex;
    /*je met les divs des albums en colonne pour que l'article, le nom et l'image descende vers 
    le bas*/
    flex-direction: column;
    /*j'alligne les objets au centre pour que tout soit centré (surtout pour le titre de l'album)*/
    align-items: center;
   
}
section {
    display: flex;
    /*la direction row pour que deux albums soit à chaque fois sur la même ligne */
    flex-direction: row;
    /*je met les div au centre et crée un espace égal de chaque côté depuis centre*/
    justify-content: center;
    gap: 30%;
}
main {
    /*en column pour que mes deux sections s'empillent*/
    flex-direction: column;
}

img, article{
    /*pour que ça s'adapte à la taille de l'écran sans qu'il puisse devenir énorme sur de grands 
    écrans*/
    width: 100%;
    max-width: 800px;
}
@media (max-width :600px ){
    section {
        display: flex;
        flex-direction: column;
    }
    /*Les images et articles prenait trop de place sur le téléphone alors j'ai réduit*/
    img, article{
    max-width: 325px;
    }
}