/* Keep the complete house width visible inside the existing portrait cards. */
.site-storefront .card[data-preview] .card__art { background: linear-gradient(180deg, transparent 35%, #070c12 75%), #4c80c0; transition: background-color 180ms ease; }
.site-storefront .card[data-preview="playing"] .card__art { background-color: #253b60; }
.site-storefront .card[data-preview] .card__art > img { transition: opacity 180ms ease; }
.site-storefront .card[data-preview="playing"] .card__art > img { opacity: 0; }
.site-storefront .card[data-preview] .card__art > img,
.site-storefront .card[data-preview] .kit-showcase__video {
  inset: 10% 0 auto; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: contain; object-position: center; transform: none;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 80%, transparent);
  mask-image: linear-gradient(transparent, #000 18%, #000 80%, transparent);
}
.kit-showcase__video { position: absolute; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 180ms ease; }
[data-preview="playing"] .kit-showcase__video { opacity: 1; }
.kit-showcase__preview { position: absolute; z-index: 1; top: 10%; left: 0; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kit-showcase__preview[hidden] { display: none; }
.kit-showcase__preview:focus-visible { outline: 3px solid #50C878; outline-offset: -3px; }
@media (max-width: 700px) {
  .site-storefront .card[data-preview] .card__art > img,
  .site-storefront .card[data-preview] .kit-showcase__video { top: 14%; }
  .kit-showcase__preview { top: 14%; }
}
@media (prefers-reduced-motion: reduce) {
  .kit-showcase__video, .kit-showcase__preview { display: none; }
}