:root {
  --vh: 1vh;
}

.hero {
  min-height: calc(var(--vh, 1vh) * 100 - 100px);
  padding-top: calc(100px + env(safe-area-inset-top, 0));
}

.hero h2 {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
}

.hero h1 {
  font-size: clamp(2.1rem, 6vw, 3.4rem);
}

@media (max-width: 768px) {
  nav {
    padding: calc(12px + env(safe-area-inset-top, 0)) 15px 12px;
  }

  .hero h2 {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  .hero h1 {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
  }
}