/* Desktop only: the product scene fades naturally into the copy area. */
@media (min-width: 901px) {
  .heroProduct {
    inset: 0;
    left: auto;
    bottom: auto;
    width: 100%;
    overflow: hidden;
  }

  .heroProduct::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      #08090b 0%,
      #08090b 28%,
      rgba(8, 9, 11, .98) 38%,
      rgba(8, 9, 11, .74) 50%,
      rgba(8, 9, 11, .30) 63%,
      rgba(8, 9, 11, 0) 78%
    );
  }

  .heroProduct img {
    width: 110%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    transform: translateX(14vw);
  }

  #desktopHero[data-color="white"] {
    transform: translate(16vw, 2vw);
  }
}