.basic-hero {
  background: var(--gradient-hero);
  padding: clamp(2rem, 6vw, 4rem) 0 var(--spacing-lg);
  text-align: center;
}

.basic-hero h1 {
  font-size: var(--font-size-display);
  color: var(--text-header);
  margin-bottom: 0;
}

.hero-image {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
}

.basic-body {
  padding: var(--spacing-xl) 0 var(--spacing-xxl);
  margin: 0 auto;
  max-width: var(--article-width);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--text-primary);
}

.basic-body .container {
  padding-inline: var(--space-page);
}

.content-image {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: var(--spacing-xl) 0 0;
}