/* Hero background is a disclosed design composite based on the supplied product photo. */
.hero-art {
  display: grid;
  place-items: center;
  min-height: 550px;
  padding: 18px;
  background: #e7ddcf;
}

.hero-product-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  box-shadow: 0 18px 38px rgba(21, 63, 54, .12);
}

.app-card.has-product-image {
  min-height: 330px;
  padding-top: 182px;
}

.app-card-image {
  position: absolute;
  inset: 0 0 auto 0;
  display: block;
  width: 100%;
  height: 158px;
  object-fit: cover;
  object-position: center;
  background: #e7ddcf;
}

@media (max-width: 800px) {
  .hero-art { min-height: 430px; padding: 16px; }
  .app-card.has-product-image {
    min-height: calc((100vw - 16vw - 14px) / 3.5 + 156px);
    padding-top: calc((100vw - 16vw - 14px) / 3.5 + 22px);
  }
  .app-card-image { height: calc((100vw - 16vw - 14px) / 3.5); }
}

@media (max-width: 480px) {
  .hero-art { min-height: 390px; padding: 12px; }
  .app-card.has-product-image {
    min-height: calc((100vw - 16vw) / 1.75 + 156px);
    padding-top: calc((100vw - 16vw) / 1.75 + 22px);
  }
  .app-card-image { height: calc((100vw - 16vw) / 1.75); }
}