@layer components {
  /*
    Imagem do serviço Media (ADR-026 §5). Layout fino: quem embute decide tamanho/recorte
    (`figure-class`/`img-class`); aqui garantimos só o comportamento de bloco e a legenda.
  */

  .media-picture {
    margin-inline: 0;
  }

  .media-picture img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    border-radius: var(--tenant-radius);
  }

  .media-picture figcaption {
    margin-block-start: 0.5rem;
    color: var(--ink-muted);
    font-size: 0.875rem;
  }
}