/* NFT thumbnails are width-led squares at every breakpoint. Keep media out of
   intrinsic layout: a percentage-height image/canvas can otherwise enlarge an
   auto-height frame on mobile. Banners and decorative artwork are not targets. */
html :is(.arc-card-art, .market-listing-art, .launch-art, .drop-art,
  .studio-example-art, .variant, .fw-art, .fw-detail-art,
  .creator-collection-art, .msc-card-art > a, .msc-row-art) {
  position: relative;
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
  max-height: none;
  min-width: 0;
  align-self: start;
  flex-shrink: 0;
}

html :is(.arc-card-art, .market-listing-art, .launch-art, .drop-art,
  .studio-example-art, .studio-example-face, .variant, .fw-detail-art,
  .creator-collection-art, .msc-card-art > a, .msc-row-art,
  .fw-art > button) > :is(img, canvas, video, iframe) {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

html .fw-art > button {
  position: absolute;
  inset: 0;
}

/* Listing rows must not stretch their NFT to match the adjacent text column. */
#marketListDialog .market-owned-art {
  position: relative;
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
  align-self: start;
  flex-shrink: 0;
}
#marketListDialog .market-owned-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

/* Standalone NFT media in detail dialogs must not stretch with their grid row. */
html :is(.market-item-dialog, .drop-dialog) > :is(img, canvas, video, iframe),
html #singleCollectionCollage canvas,
html .collection-gallery-grid canvas {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  align-self: start;
  object-fit: contain;
}