.hero-art {
  position: absolute !important;
  inset: 0 !important;
  background-image: url('/assets/brand/hero-dawn-full.avif') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  transform: none !important;
  animation: none !important;
}

.hero-vignette {
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg,
      rgba(1, 5, 10, .42) 0%,
      rgba(1, 5, 10, .16) 32%,
      rgba(1, 5, 10, .02) 60%,
      rgba(1, 5, 10, 0) 100%),
    linear-gradient(180deg,
      rgba(1, 5, 10, 0) 0%,
      rgba(1, 5, 10, 0) 70%,
      rgba(1, 5, 10, .72) 100%) !important;
}

.hero-logo {
  width: min(460px, 46vw) !important;
  max-width: 100% !important;
}

@media (max-width: 700px) {
  .hero-art {
    background-position: 70% center !important;
  }
  .hero-logo {
    width: min(320px, 76vw) !important;
  }
  .hero-vignette {
    background:
      linear-gradient(180deg,
        rgba(1, 5, 10, .12) 0%,
        rgba(1, 5, 10, .18) 42%,
        rgba(1, 5, 10, .80) 78%,
        #01050a 100%) !important;
  }
}