.hero {
  position: relative;

  min-height: 100svh;

  overflow: hidden;

  display: grid;
  place-items: center;

  isolation: isolate;
}

.hero-image,
.hero-overlay {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
}

.hero-image {
  z-index: -2;

  object-fit: cover;
}

.hero-overlay {
  z-index: -1;

  background-color: var(--color-overlay);
}

.hero-content {
  width: min(calc(100% - 32px), var(--container-width));

  margin-inline: auto;

  text-align: center;

  padding-top: var(--header-height);
}

.hero h1 {
  margin: 0;

  color: var(--color-white);

  font-size: clamp(1.85rem, 3.8vw, 3.1rem);
  font-weight: 700;

  line-height: 1.08;

  letter-spacing: 0.035em;

  text-transform: uppercase;
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: clamp(1.7rem, 8vw, 2.5rem);
  }
}