/*fait par Lucas Grossrieder le 13.01.*/


section {
  /*Je crée un espace entre chaque objet de la section (image et article) avec space between*/
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  gap: 50px;

}
main {
  /*j'empile toutes mes sections avec un petit espace*/
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.espace {
  /*je crée un grand effet espacé entre l'image et le texte de la 2ème section*/
display: flex;
justify-content: space-around;
gap: 30rem;
}

@media(max-width : 600px){
section {
  display: flex;
  flex-direction: column;
  /*Modifier l'espace un peu grand entre les images et le texte*/
  gap: 20px;
  margin-top: 30px;
}
  img {
    /*pour que l'image s'étende dans toute la place de l'écran automatiquement*/
    width: 100%; 
    /*pour pas qu'elle puisse prendre trop de place */
    max-width: 350px; 
  }
  article {
    /*l'article prend trop de place alors on le redimensionne*/
    width: 100%; 
    max-width: 350px;
  }

  .espace {
    flex-direction: column;
    gap: 20px;
     
  }
  .imgInverse {
    /*On change la position de l'image pour qu'elle soit dans le même ordre que les autres*/
    order: 1;  
  }
  
}