La fiche d'un auteur

.zone {
  container: zone / inline-size;
}

.auteur {
  padding: 1rem;
  background: #fff;
  border: 1px solid #e2d8c9;
  border-radius: 8px;
  text-align: center;
}

.auteur img {
  border-radius: 50%;
}

@container zone (width >= 30rem) {
  .auteur {
    display: flex;
    gap: 1rem;
    align-items: center;
    text-align: start;
  }
}

Dans la page code/ch9/exercices/auteur.html, à 1000 pixels de large, l'encadré mesure 240 pixels (fiche centrée, Chromium calcule display: block) et la colonne principale 696 pixels (fiche horizontale, display: flex). Une requête média ne voit que la fenêtre, identique pour les deux fiches : elle les disposerait de la même façon.