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

.page-hero,
.product-hero {
  padding: 32px 0;
}

.page-hero h1,
.product-hero h1 {
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
}

.page-hero-description,
.product-hero-description {
  max-width: 650px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

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

.home-hero {
  background: linear-gradient(
    135deg,
    var(--color-background) 0%,
    var(--color-accent-light) 100%
  );
  padding-bottom: 40px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 800px) {
  .page-hero,
  .product-hero {
    padding: 28px 0;
  }
}