/* MR Media content-image fit system
   The foreground image is always fully visible. A blurred duplicate fills
   any unused letterbox space so the frame keeps the image's own color mood. */
.media-fit-frame {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  background: #0b0b0e;
}

.media-fit-frame > .media-fit-backdrop,
.media-fit-frame > .media-fit-image {
  position: absolute !important;
  display: block;
  margin: 0 !important;
  max-width: none !important;
  user-select: none;
  -webkit-user-drag: none;
}

.media-fit-frame > .media-fit-backdrop {
  z-index: 0 !important;
  inset: -10% !important;
  width: 120% !important;
  height: 120% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: blur(24px) saturate(1.14) brightness(.78) !important;
  opacity: .76;
  transform: scale(1.08) !important;
  pointer-events: none;
}

.media-fit-frame > .media-fit-image {
  z-index: 1 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: none !important;
  transform: none !important;
  border-radius: 0 !important;
}

.card:hover .media-fit-frame > .media-fit-image,
.explore-card:hover .media-fit-frame > .media-fit-image {
  transform: none !important;
  filter: none !important;
}

.article-hero-media {
  width: 100%;
  aspect-ratio: 16 / 8;
  margin: 0;
  border-radius: var(--radius-lg);
}

.article-hero-media .article-hero-image {
  aspect-ratio: auto !important;
}

.explore-card figure.media-fit-frame::after {
  z-index: 2;
}

.explore-card figure.media-fit-frame figcaption,
.explore-card .explore-card-action,
.explore-card.is-featured figure.media-fit-frame::before {
  z-index: 3;
}

.explore-slide.media-fit-frame figcaption,
.explore-slide.media-fit-frame .explore-download {
  z-index: 4;
}

.explore-thumbs button.media-fit-frame {
  position: relative;
}

@media (max-width: 560px) {
  .article-hero-media {
    aspect-ratio: 16 / 10;
    border-radius: 1rem;
  }
}