/**
 * medias — un ou plusieurs médias rendus côte à côte.
 *
 * La grille n'apparaît qu'à partir de deux médias (voir medias.twig) : un
 * champ à cardinalité unique garde un rendu nu, sans élément intercalaire ni
 * `display: grid` qui interférerait avec le CSS des composants consommateurs.
 */

.comp--medias--multiple {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--ffc-gouttiere, 1.5rem);
}

.comp--medias__item {
  min-width: 0;
}

/**
 * Tailles. Le conteneur est borné, l'image reste à sa largeur naturelle sous
 * ce plafond : une photo de 200px demandée en « Grand » ne s'étire pas jusqu'à
 * 512, elle reste à 200. Agrandir une image au-delà de ses pixels ne fabrique
 * pas de détail, ça fabrique du flou.
 *
 * Pas de centrage : le média s'aligne au fer de son bloc. Un conteneur plus
 * étroit que sa colonne détacherait sinon le média de la colonne de texte
 * qu'il illustre.
 *
 * « Largeur complète » ne pose pas de classe — c'est l'absence de plafond.
 */
.comp--medias--petit {
  max-width: var(--ffc-medias-petit, 12rem);
}

.comp--medias--moyen {
  max-width: var(--ffc-medias-moyen, 20rem);
}

.comp--medias--grand {
  max-width: var(--ffc-medias-grand, 32rem);
}