nav {

    display: flex;

  

    justify-content: center;

    align-items: center;

    font-family: Arial, Helvetica, sans-serif;

    align-content: center;

    margin-top: 10px;

    justify-content: space-around;

  }

  

  form {

    display: flex;

    justify-content: end;

    

  

  }

  h1 {

    font-family: "Courier New", Courier, monospace;

    

  

  }



.main-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

  gap: 16px;

  padding: 20px;

}









.card {

  border: 3px solid #000000;

  border-radius: 4px;

  padding: 12px;

  background: #fff;

  text-align: center;

}



img{

  width: 200px;

  margin-left:5px;

}





@media (max-width: 600px) {

  .cards {

    grid-template-columns: 1fr; /* une seule colonne = empilement vertical */



  }

}