/* Riquadro immagine a riempimento con angoli arrotondati; sfondo segnaposto finché l'immagine non c'è. */
@layer components {
  .media {
    position: relative; overflow: hidden;
    border-radius: var(--media-radius, var(--radius-l));
    background: var(--color-surface);
    & img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  }
  .media--contain img { object-fit: contain; padding: var(--media-pad, 14px); }

  .icon { display: block; flex: none; }
}