/* Keep the text on white; reveal the photograph beyond the copy column. */
.hero {
  --hero-white-edge: 60%;
  background: #fff;
}

.hero.washer-hero {
  --hero-white-edge: 55%;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #fff var(--hero-white-edge),
    rgb(255 255 255 / 90%) calc(var(--hero-white-edge) + 3%),
    rgb(255 255 255 / 55%) calc(var(--hero-white-edge) + 7%),
    rgb(255 255 255 / 15%) calc(var(--hero-white-edge) + 11%),
    rgb(255 255 255 / 0%) calc(var(--hero-white-edge) + 16%)
  );
}

.hero .hero-content {
  position: relative;
  z-index: 1;
}

.hero .hero-bg {
  opacity: 1;
}

@media (max-width: 1199px) {
  .hero { --hero-white-edge: 63%; }
  .hero.washer-hero { --hero-white-edge: 59%; }
}

@media (max-width: 900px) {
  .hero::before {
    background: linear-gradient(90deg, #fff 0%, #fff 68%, rgb(255 255 255 / 96%) 82%, rgb(255 255 255 / 65%) 100%);
  }
}

@media (max-width: 600px) {
  .hero::before {
    background: linear-gradient(90deg, #fff 0%, #fff 65%, rgb(255 255 255 / 97%) 85%, rgb(255 255 255 / 90%) 100%);
  }
}