.hero {
  position: relative;
  overflow: hidden;
  background: #05060f;
}

.hero-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #05060f;
}

.hero-fx__picture,
.hero-fx__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-fx__picture {
  display: block;
}

.hero-fx__image {
  object-fit: cover;
  object-position: center;
}

.hero-fx__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, rgba(5, 6, 15, 0.08) 0%, rgba(5, 6, 15, 0.34) 48%, rgba(5, 6, 15, 0.82) 100%),
    linear-gradient(90deg, rgba(5, 6, 15, 0.78) 0%, rgba(5, 6, 15, 0.34) 48%, rgba(5, 6, 15, 0.72) 100%),
    linear-gradient(180deg, rgba(5, 6, 15, 0.28) 0%, rgba(5, 6, 15, 0.08) 42%, rgba(5, 6, 15, 0.88) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
}

.reveal,
.reveal__inner {
  display: contents;
}

@media (max-width: 760px) {
  .hero-fx__image {
    object-position: center top;
  }

  .hero-fx__overlay {
    background:
      radial-gradient(circle at 50% 28%, rgba(5, 6, 15, 0.06) 0%, rgba(5, 6, 15, 0.48) 58%, rgba(5, 6, 15, 0.9) 100%),
      linear-gradient(180deg, rgba(5, 6, 15, 0.18) 0%, rgba(5, 6, 15, 0.44) 52%, rgba(5, 6, 15, 0.92) 100%);
  }
}