.hero {
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  display: flex;
  justify-content: center;
  background: none;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 50%;
  z-index: 0;
}

.hero::before {
  left: 0;
  background: linear-gradient(to bottom, #f25c0c 0%, #fd660f 10%, #fd690e 20%, #fc6b10 30%, #fc6d11 40%, #fb6b13 50%, #fb5f0d 60%, #f6590c 70%, #cb3f06 80%, #b43707 90%, #96390c 100%);
}

.hero::after {
  right: 0;
  background: linear-gradient(to bottom, #d44808 0%, #e54302 10%, #ed4b04 20%, #e64204 30%, #e84003 40%, #ea4706 50%, #c63605 60%, #ab3003 70%, #982703 80%, #6a1b01 90%, #732a05 100%);
}

.hero-scene {
  display: block;
  width: 100%;
  max-width: 1240px;
  height: auto;
  position: relative;
  z-index: 1;
}

.hero-foreground {
  position: absolute;
  inset-block: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 100%;
  max-width: 1240px;
  height: 100%;
  object-fit: contain;
  z-index: 3;
  pointer-events: none;
}

.hero-logo {
  z-index: 2;
  top: -4%;
  width: min(26%, 370px);
}