.cta-banner {
  background: var(--accent);
  color: var(--black);
  padding-block: var(--space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 120%, rgba(10, 10, 10, 0.25), transparent 60%);
}

.cta-banner__title {
  font-size: var(--fs-h2);
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: var(--space-sm);
  position: relative;
}

.cta-banner__sub {
  font-size: var(--fs-lg);
  max-width: 50ch;
  margin-inline: auto;
  margin-bottom: var(--space-md);
  color: rgba(10, 10, 10, 0.75);
  position: relative;
}

.cta-banner .btn--dark {
  position: relative;
}

.cta-banner--dark {
  background: var(--black);
  color: var(--cream);
}
.cta-banner--dark .cta-banner__sub {
  color: var(--text-on-dark-muted);
}