body {
  background-color: transparent;
}

#hero {
  width: 100%;
  height: calc(100dvh - var(--nav-height));
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero-logo {
  width: 18rem;
  transform: translate(0, -2rem);
}

#bg {
  z-index: -10;
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
}

#bg-l, #bg-r {
  position: absolute;
  height: auto;
  overflow-x: hidden;
}

#bg-l {
  z-index: 0;
  left: -10%;
  bottom: -2%;
  width: clamp(40vh, 28rem, 50vw);
  height: auto;
}

#bg-r {
  object-fit: contain;
  object-position: top center;
  z-index: 0;
  right: calc(-8%);
  top: -10%;
  width: clamp(55vh, calc(44rem), 80vw);
  height: 110%;
}