/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #f7f1e8;
  color: black;
  font-family: Verdana;
}

article {
  max-width: 55em;
  border: solid 1px silver;
  background: whitesmoke;
  box-shadow: 1px 1px 11px -5px rgba(0,0,0,0.53);
  padding: 2em;
  width: 100%;       /* Force l'article à occuper l'espace disponible */
  min-width: 0;      /* Désactive le blocage de taille de Flexbox (sinon il refuse de rétrécir en dessous de la taille minimale de son contenu (min-width: auto).) */
}

article.chinois {
    font-size: 1.2em;
}

figure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
  gap: 0 15px; /* 0px d'espace en haut/bas (vertical) et 15px d'espace gauche/droite (horizontal) */
  max-width: 50em;
  margin: 0 auto 0.5em auto;
  align-items: end; /* Aligne le bas des images */
}

figure img {
  width: 100%;
  max-height: auto;
}

@media (max-width: 45em) {
  figure img {
    max-height: 15em; /* Limite la hauteur sur mobile */
    width: auto;  /* Évite la déformation */
  }
}

figure figcaption {
  grid-column: 1 / -1; /* Force la légende à prendre toute la largeur en bas */
  align-self: start;
}

figcaption {
  font-style: italic;
}

main {
  display: flex;
  justify-content: center;
}