/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--surface-alt), transparent 60%),
    var(--bg);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 56px;
  padding-block: 88px 96px;
}
.hero__title {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--heading);
}
.hero__subtitle {
  margin-top: 22px;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  color: var(--text-mute);
  max-width: 36ch;
}
.hero__buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.hero__media { justify-self: end; }
.hero__img {
  width: 100%; height: auto; max-width: 620px;
  border-radius: var(--radius);
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 36px; padding-block: 56px 64px; text-align: center; }
  .hero__subtitle { margin-inline: auto; }
  .hero__buttons { justify-content: center; }
  .hero__media { justify-self: center; order: -1; }
  .hero__img { max-width: 460px; }
}