.template-hero,
.article-header,
.minisite-hero,
.error-page {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 7rem);
  background:
    radial-gradient(circle at 88% 16%, transparent 0 6rem, rgb(132 200 165 / 20%) 6.1rem 6.25rem, transparent 6.35rem),
    linear-gradient(145deg, var(--lp-white), var(--lp-sky-soft));
}

.template-hero__content,
.error-page__content {
  max-width: 52rem;
}

.template-hero h1,
.article-header h1,
.minisite-hero h1,
.error-page h1 {
  max-width: 15ch;
}

.template-hero p:last-child,
.minisite-hero p:last-child,
.error-page__content > p {
  max-width: 44rem;
  font-size: 1.125rem;
}

.template-hero--tool {
  padding-bottom: clamp(6rem, 12vw, 10rem);
}

.template-section {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: var(--lp-white);
}

.template-page--tool .template-section {
  margin-top: clamp(-5rem, -7vw, -3rem);
  background: transparent;
}

.template-placeholder {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--lp-white);
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.template-grid {
  display: grid;
  gap: var(--space-4);
}

.template-grid .template-placeholder h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.article-container {
  max-width: 48rem;
}

.article-deck {
  font-size: 1.1875rem;
}

.article-meta {
  color: var(--lp-muted);
  font-size: 0.875rem;
  font-weight: 650;
}

.article-body {
  padding-block: clamp(3rem, 7vw, 5rem);
}

.article-body h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.minisite-hero {
  background:
    radial-gradient(circle at 88% 16%, transparent 0 6rem, rgb(255 179 18 / 22%) 6.1rem 6.25rem, transparent 6.35rem),
    linear-gradient(145deg, var(--lp-white), var(--lp-mint-soft));
}

.error-page {
  min-height: 60vh;
}

.error-page .button {
  margin-top: var(--space-4);
}

@media (min-width: 48rem) {
  .template-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .template-page--minisite .template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}