/* Telegram photographs keep their intrinsic proportions; their frame follows them. */
.feed-card a.feed-media-frame:not(.media-unavailable),
.hero-post-media .feed-media-frame:not(.is-video):not(.media-unavailable) {
  display: block;
  aspect-ratio: auto;
  max-height: none;
  background: transparent;
}
.feed-card .feed-media-frame:not(.is-video):not(.media-unavailable) > img,
.hero-post-media .feed-media-frame:not(.is-video):not(.media-unavailable) > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto var(--feed-ratio, 1.5);
  padding: 0;
  background: transparent;
}
.home-post-media,
.hero-post-media {
  background: transparent;
  align-self: start;
}
/* A vertical album avoids cropped tiles and empty cells between unlike photos. */
.home-post-media.is-gallery {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.home-post-media.is-gallery .feed-media-frame:not(.is-video):not(.media-unavailable) {
  aspect-ratio: auto;
  max-height: none;
}
.hero-feature.has-media {
  grid-template-columns: auto minmax(0, 1fr);
}
.hero-post-media {
  width: fit-content;
  max-width: 100%;
}
.hero-post-media .feed-media-frame:not(.is-video):not(.media-unavailable) {
  width: fit-content;
  max-width: 100%;
}
.hero-post-media .feed-media-frame:not(.is-video):not(.media-unavailable) > img {
  width: auto;
  max-width: min(32vw, 340px);
  max-height: 320px;
}
.feed-media-frame.media-unavailable {
  min-height: 140px;
}
/* Below this width the main hero shares space with the adjacent shop panel. */
@media (max-width: 1000px) {
  .hero-feature.has-media {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-post-media,
  .hero-post-media .feed-media-frame:not(.is-video):not(.media-unavailable) {
    width: 100%;
  }
  .hero-post-media .feed-media-frame:not(.is-video):not(.media-unavailable) > img {
    width: 100%;
    max-width: none;
    max-height: none;
  }
}