/* Spinning mug posters keep the same box as the still product image they replace. */

.mug-catalog-sprite-host {
  position: relative;
  display: block;
  line-height: 0;
  min-width: 0;
}

.mug-catalog-sprite-host > canvas.mug-catalog-sprite {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  display: block;
  object-fit: contain;
  background: transparent;
}

.award-grid-card-image > .mug-catalog-sprite-host {
  width: 50%;
  height: 50%;
}

.award-grid-card-carousel-track > .mug-catalog-sprite-host {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  padding: 17%;
  box-sizing: border-box;
}

.product-card-image > .mug-catalog-sprite-host {
  width: 100%;
  height: 100%;
}

.product-preview-carousel-track > .mug-catalog-sprite-host,
.mug-catalog-sprite-host.product-preview-image,
.mug-catalog-sprite-host.product-preview-carousel-image {
  height: 400px;
  max-height: 400px;
}

.mug-cta-card__frame > .mug-catalog-sprite-host,
.mug-cta-card__frame > img {
  width: 88%;
  height: 88%;
  max-width: 100%;
  max-height: 100%;
}

.mug-cta-card__frame > .mug-catalog-sprite-host > canvas.mug-catalog-sprite {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

.cart-item-image-frame > .mug-catalog-sprite-host {
  width: 100%;
  height: 100%;
}

.admin-product-preview-modal__draft-item > .mug-catalog-sprite-host {
  width: 100%;
  aspect-ratio: 1;
  max-height: 168px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

@media (max-width: 768px) {
  .product-preview-carousel-track > .mug-catalog-sprite-host,
  .mug-catalog-sprite-host.product-preview-image,
  .mug-catalog-sprite-host.product-preview-carousel-image {
    height: 340px;
    max-height: 340px;
  }
}