.media-frame {
  --media-ratio: 16 / 9;

  position: relative;
  isolation: isolate;

  display: block;

  width: 100%;
  min-width: 0;

  aspect-ratio: var(--media-ratio);

  overflow: hidden;

  text-decoration: none;
}

/* An image fills the frame and covers the placeholder whole.
   A height:100% child cannot exceed the frame, so it can
   never spill out of the clipped corner. */

.media-frame img,
.media-frame picture,
.media-frame video {
  position: relative;
  z-index: 2;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

/* A fixed ice-blue placeholder from the supplied increased-contrast cyan swatch. Images keep their original
   geometry; empty frames add no gradient, grid, or oversized brand mark. */
.media-frame {
  background: var(--media-placeholder);
}

/* A quiet, decorative picture outline for empty image slots. */
.media-frame:not(:has(img, video, picture))::before {
  content: "";
  position: absolute;
  width: clamp(40px, 5vw, 64px);
  aspect-ratio: 1;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  background: var(--media-placeholder-ink);
  opacity: .65;
  mask: url('/assets/icons/image-placeholder.svg?v=fdae7036441e') center / contain no-repeat;
  -webkit-mask: url('/assets/icons/image-placeholder.svg?v=fdae7036441e') center / contain no-repeat;
  pointer-events: none;
  user-select: none;
}

.media-frame--zoom img {
  transition: transform 620ms var(--ease-out);
}

.media-frame--zoom:hover img,
.media-frame--zoom:focus-visible img {
  transform: scale(1.04);
}