/* définit un conteneur de type flex avec une direction en ligne ou en colonne selon la taille de l'écran */
@media only screen and (min-width:1024px){
    
#box {
    display:flex;
    flex-direction: row;
}
}

@media only screen and (max-width:1024px){

    

#box {
    display:flex;
    flex-direction: column;
}
}



/* définit une image centrée horizontalement avec une largeur initiale de 500px, un arrondi aux coins et une ombre */
#image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 500px; /* taille initiale */
    border-radius: 2em;
    box-shadow: 0 0 2em rgba(14, 185, 185, 0.562); 
    transition: width 0.5s ease; /* ajouter une transition pour une animation en douceur */
}

/* lorsque la souris survole l'image, agrandit progressivement sa largeur à 1000px */
#image:hover{
    width: 1000px; /* taille agrandie */
}