/* Image scale refinements. Load after the Lovart layout and Swap styles. */
#view-home,
#view-nft { container-type: inline-size; }

/* Use the app's own width for the Lovart crop, so desktop preview stays mobile sized. */
#view-home .hero-copy {
  width: min(77cqw, 274px);
  min-height: 0;
  height: min(38cqw, 135px);
  background-size: min(100cqw, 356px) auto;
  background-position: max(-11cqw, -39px) max(-14cqw, -50px);
}

#view-home .hero-visual {
  height: clamp(165px, 56cqw, 205px);
  min-height: 0;
  margin-top: 0;
}

#view-home .lovart-home-art {
  top: max(-43cqw, -154px);
  left: 50%;
  width: min(70cqw, 250px);
  max-width: none;
  height: auto;
  transform: translateX(-50%);
}

/* The illustrated catalogue remains two columns while each cover becomes shorter. */
#view-nft .nft-card-art,
#view-nft .lovart-preview-art {
  height: clamp(112px, 36cqw, 145px);
  aspect-ratio: auto;
}

#view-nft .nft-card-art img,
#view-nft .lovart-preview-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* My: four compact series previews; actual holdings keep readable text rows. */
#view-mine .mine-nft-preview {
  grid-template-columns: repeat(4, 60px);
  justify-content: space-between;
  gap: 6px;
}

#view-mine .mine-nft-preview img,
#view-mine .owned-nft-thumb {
  width: 60px;
  height: 60px;
  aspect-ratio: auto;
  background: #f5e9fb;
}

#view-mine .mine-nft-preview img,
#view-mine .owned-nft-thumb img { object-fit: contain; }

/* Keep detail art centered and fully visible instead of stretching it to page width. */
.nft-detail-image {
  width: min(210px, 70%);
  height: auto;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}

.nft-detail-image img { object-fit: contain; }

/* The Swap header cat is a small corner character, at any viewport width. */
#view-swap .mw-swap-heading {
  min-height: 106px;
  padding-right: 112px;
}

#view-swap .mw-swap-heading::after {
  right: 0;
  bottom: 2px;
  width: 108px;
  height: 100px;
}