.redesign-hero-fade {
  position: relative;
  isolation: isolate;
  --redesign-hero-fade-gradient: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .98) 7%, rgba(255, 255, 255, .93) 14%, rgba(255, 255, 255, .78) 22%, rgba(255, 255, 255, .48) 31%, rgba(255, 255, 255, .18) 39%, rgba(255, 255, 255, .04) 47%, transparent 55%);
  --redesign-hero-fade-secondary: none;
}

.redesign-hero-fade::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  background-image: var(--redesign-hero-fade-gradient), var(--redesign-hero-fade-secondary);
  content: "";
  pointer-events: none;
}

@media (max-width: 700px) and (orientation: portrait) {
  .redesign-hero-fade::before {
    content: none;
  }
}