.hero-character {
  inset: 0 0 0 39%;
  background-position: center 30%;
  mask-image: linear-gradient(90deg, transparent 0, #000 19%, #000 100%);
}

.hero-copy { width: min(620px, 46vw); }

@media (max-width: 1180px) {
  .hero-copy { width: min(570px, 50vw); }
}

@media (max-width: 780px) {
  .hero-copy { width: 100%; }
  .hero-character {
    position: relative;
    inset: auto;
    mask-image: linear-gradient(#000 55%, transparent);
  }
}