/* ============================================================
   Product Hero Image Section
   Full-width banner above the product details. Separate
   desktop / mobile artwork via <picture>. Natural aspect,
   no crop.
   ============================================================ */

.product-hero-image {
  width: 100%;
}

/* Desktop: 25% wider than the product section's content width (Dawn .page-width) */
@media screen and (min-width: 750px) {
  .product-hero-image {
    max-width: calc(var(--page-width) * 1.25);
    margin: 0 auto;
    padding: 0 5rem;
  }
}

.product-hero-image__img {
  display: block;
  width: 100%;
  height: auto;
}