:root {
  --space-hero-top: 72px;
  --space-hero-bottom: 72px;
  --space-section-y: 56px;
  --space-between-sections: 36px;
  --space-final-cta-top: 40px;
}

.hero {
  padding: var(--space-hero-top) 20px var(--space-hero-bottom) 20px;
}

.hero img {
  margin-top: -40px;
}

.section {
  padding: var(--space-section-y) 20px;
}

.hero + .section {
  padding-top: 14px;
}

.section + .section {
  padding-top: var(--space-between-sections);
}

.final-cta {
  margin-top: var(--space-final-cta-top);
}

@media (max-width: 768px) {
  :root {
    --space-hero-top: 56px;
    --space-hero-bottom: 56px;
    --space-section-y: 44px;
    --space-between-sections: 28px;
    --space-final-cta-top: 32px;
  }

  .hero img {
    margin-top: -28px;
  }

  .hero + .section {
    padding-top: 12px;
  }
}