.hero {
  justify-content: flex-end;
  background-image: url("assets/hero-background.png");
}

.hero::after {
  background:
    linear-gradient(270deg, #050403ef 0%, #050403aa 34%, transparent 68%),
    linear-gradient(0deg, #080604 0%, transparent 28%);
}

.hero-copy {
  width: min(54%, 720px);
}

@media (max-width: 900px) {
  .hero {
    justify-content: flex-start;
    background-position: 36% center;
  }

  .hero::after {
    background: linear-gradient(0deg, #080604 0%, #050403dc 48%, #05040320 83%);
  }

  .hero-copy {
    width: 100%;
  }
}