.site-header,
main,
footer {
  overflow-x: clip;
}

.hero {
  position: relative;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -84px calc((100vw - 100%) / -2) 0;
  background:
    linear-gradient(90deg, rgba(2, 8, 18, .96) 0%, rgba(2, 8, 18, .72) 46%, rgba(2, 8, 18, .28) 100%),
    url("assets/earth-hero-v2.png") center bottom / cover no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 45% calc((100vw - 100%) / -2) 0;
  background: linear-gradient(0deg, var(--bg), transparent);
}

.hero-visual {
  position: relative;
}

.hero-visual img {
  width: min(100%, 480px);
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  mask-image: none;
}

@media (max-width: 800px) {
  .hero::before {
    background:
      linear-gradient(0deg, rgba(2, 8, 18, .97) 0%, rgba(2, 8, 18, .55) 74%, rgba(2, 8, 18, .48) 100%),
      url("assets/earth-hero-v2.png") center bottom / cover no-repeat;
  }

  .hero-visual {
    min-height: 280px;
  }

  .hero-visual img {
    width: min(78vw, 320px);
  }
}