.product-hero-video {
  min-height: 620px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .72fr);
  overflow: hidden;
}

.product-hero-video .product-hero-copy {
  padding: clamp(62px, 6vw, 92px) clamp(30px, 4.5vw, 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-hero-video .product-hero-media {
  min-height: 100%;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: #1b2024 url("assets/automotive-spray-booth-hero-poster.webp") center / cover no-repeat;
}

.product-hero-video .product-hero-media::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 20%;
  z-index: 1;
  background: linear-gradient(90deg, var(--ink), rgba(12, 17, 21, .45), transparent);
  pointer-events: none;
}

.product-hero-video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  .product-hero-video {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .product-hero-video .product-hero-media {
    height: 460px;
  }

  .product-hero-video .product-hero-media::before {
    width: 100%;
    height: 18%;
    inset: 0 0 auto;
    background: linear-gradient(180deg, var(--ink), transparent);
  }
}

@media (max-width: 760px) {
  .product-hero-video {
    padding: 0;
  }

  .product-hero-video .product-hero-copy {
    padding: 58px 24px 50px;
  }

  .product-hero-video .product-hero-media {
    height: 390px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-hero-video video {
    visibility: hidden;
  }
}