/* The same logo fallback in every media slot; dimensions belong to its component. */
.moto-design :is(.moto-media-frame, .news-card__media, .article-card__media, .video-card__media, .calendar-card__media, .gallery-album__media, .club-card__media, .moto-store-card__media, .moto-store-feature__media, .moto-model__image, .moto-product__media, .moto-product__media-link, .moto-cart-item__image, .moto-studio__item-mark):has(> .moto-media-placeholder) {
  display: grid;
  place-items: center;
  background: var(--color-surface-dark-raised);
}
.moto-design :is(.moto-media-frame, .news-card__media, .article-card__media, .video-card__media, .calendar-card__media, .gallery-album__media, .club-card__media, .moto-store-card__media, .moto-store-feature__media, .moto-model__image, .moto-product__media, .moto-product__media-link, .moto-cart-item__image, .moto-studio__item-mark) > img.moto-media-placeholder {
  position: static;
  display: block;
  width: min(42%, 150px);
  max-width: 150px;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  object-fit: contain;
  background: transparent;
  transform: none;
  filter: none;
  transition: none;
}
.moto-design .home-gallery-media { display: grid; height: 190px; flex-shrink: 0; overflow: hidden; }
.moto-design .home-gallery-media > img:not(.moto-media-placeholder) { width: 100%; height: 190px; object-fit: cover; }
.moto-design .moto-studio__cover-control > .moto-media-frame--preview { display: grid; place-items: center; width: 116px; height: 78px; flex: 0 0 auto; border-radius: 6px; }
/* Home stories use a background photo behind text. Keep that established layout. */
.moto-design .story:has(.moto-media-placeholder) { background: var(--color-surface-dark-raised); }
.moto-design .story:has(.moto-media-placeholder)::after { background: none; }
.moto-design .story:has(.moto-media-placeholder) { align-content: stretch; grid-template-rows: minmax(40px, 1fr) auto; row-gap: 12px; }
.moto-design .story > a:has(.moto-media-placeholder) { display: grid; place-items: center; }
.moto-design .story img.moto-media-placeholder { position: static; z-index: auto; width: min(42%,150px); height: auto; margin: 0; object-fit: contain; transform: none; filter: none; transition: none; }
.moto-design .video-tile.moto-video-placeholder { background: var(--color-surface-dark-raised); }
.moto-design .video-tile.moto-video-placeholder::before { background-size: min(42%,150px) auto; background-repeat: no-repeat; transform: none; }
.moto-design .video-tile.moto-video-placeholder::after { background: none; }
.moto-design .video-tile.moto-video-placeholder .video-play { display: none; }

/* Avoid percentage-height/intrinsic-size grid cycles in mobile browsers. */
.moto-design :is(.calendar-card__media,.news-card__media,.article-card__media,.video-card__media,.gallery-album__media){position:relative}
.moto-design :is(.calendar-card__media,.news-card__media,.article-card__media,.video-card__media,.gallery-album__media)>img:not(.moto-media-placeholder){position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;margin:0;object-fit:cover}
