/* Show authored media at its own width and aspect ratio, capped by the viewport. */
.article-content > .media-frame {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: 100vw;
  margin: 32px 0 55px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.article-content > figure.media-frame { width: max-content; }
.article-content > figure.media-frame > img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.article-content > .video-frame { width: min(var(--native-width), 100vw); }
.video-frame .viewport-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: var(--native-ratio);
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}

.original-home .origin-wide-image {
  width: max-content;
  max-width: 100vw;
  background: transparent;
}
.original-home .origin-wide-image img { width: auto; max-width: 100%; height: auto; }

@media (max-width: 700px) {
  .article-content > .media-frame { margin: 24px 0 38px; }
}