.cta-banner {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.95), rgba(var(--color-bg-dark-rgb), 0.95));
  color: var(--color-text-light);
}

.cta-banner__inner {
  padding: var(--spacing-lg) 0;
  display: grid;
  gap: var(--spacing-md);
  align-items: start;
}

.cta-banner__inner > :first-child {
  display: grid;
  gap: var(--title-gap);
}

.cta-banner__inner > :first-child :where(h1, h2, h3, h4, h5, h6, p) {
  margin: 0;
}

.cta-banner__title {
  font-size: var(--h2-size);
  font-weight: 700;
  letter-spacing: var(--heading-letterspacing-tight);
  line-height: 1.15;
  color: var(--color-text-light);
}

.cta-banner__text {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--subtitle-size);
  line-height: var(--subtitle-lineheight);
  max-width: 70ch;
}

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.cta-banner__actions .btn--primary {
  background: var(--color-accent);
  color: var(--color-bg-dark);
}

.cta-banner__actions .btn--outline {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-text-light);
}

.cta-banner__actions .btn--outline:hover {
  background: rgba(255, 255, 255, 0.08);
}

main#conteudo > section.cta-banner > div.container > div.cta-banner__actions > a.btn:nth-child(2) {
  background-color: rgb(34, 197, 94);
  color: #193343;
}

@media (min-width: 768px) {
  .cta-banner__inner {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
  }
}