body {
    background-color: rgb(204, 201, 197);
    color: #423535;
    line-height: 1.4;
    margin: 0em;
    font-size: 1.15em;
    display: grid;
    grid-template-columns: 2fr;
}

header{
    background: #3d3d3d;
    color: rgb(177, 177, 177);
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  
h1 {
    font-size: 6vw;
    font-size: clamp(1.5em, 8vw, 5em);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: -0.05em;
  }

  
p {
    text-align: left;
    margin: 3%;
    text-wrap: balance;
    max-width: 100em;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

img {
    width: 100%;
}

a { color: white}

.container { 
    display: grid; 
    gap:.5em;
    /* autant de colonnes que possible (auto-fill), dont la largeur est au minimum 300px */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    /* on ne définit pas de lignes, le navigateur en créera autant que nécessaire */
  }

  .container img { 
    max-width: 100%; /* pour ne pas les agrandir mais uniquement les rétrécir */
    width: 100%; /* pour forcer leur redimensionnement */
  }