.product-page .hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  height: 170px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, .99) 0%,
    rgba(255, 255, 255, .91) 38%,
    rgba(255, 255, 255, .54) 68%,
    rgba(255, 255, 255, 0) 100%
  );
}

@media (max-width: 680px) {
  .product-page .hero::before {
    display: block;
    height: 138px;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, .99) 0%,
      rgba(255, 255, 255, .92) 48%,
      rgba(255, 255, 255, 0) 100%
    );
  }
}