/* The 13 photographic assets are 1672 × 941. Keep that full framing on screen. */
@media screen {
  .audience-photo > img[src*="beeld-"],
  .lesson-image-grid img[src*="beeld-"],
  .script-card > img[src*="beeld-"],
  img.lesson-image[src*="beeld-"] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1672 / 941;
    object-fit: cover;
    object-position: center;
  }

  /* Photo previews use their native ratio; transparent silhouettes keep 4:3. */
  .image-button:not(.silhouette-bg) {
    aspect-ratio: 1672 / 941;
  }

  /* New video covers contain the complete photograph, without a CSS crop. */
  img[src*="media/video-covers/"] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1100 / 619;
    object-fit: contain;
    object-position: center;
  }

  .video-frame video,
  video[poster*="media/video-covers/"] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center;
  }
}