@layer components {
  .cta {
    border-top: 1px solid var(--color-border);
    padding-top: var(--block-space-triple);
    margin-top: var(--block-space-triple);
    text-align: center;
  }

  .cta__content {
    margin-bottom: var(--block-space-double);
  }

  .cta__title {
    font-size: var(--text-title-2);
    font-weight: 600;
    margin: 0 0 var(--block-space-half) 0;
  }

  .cta__description {
    color: var(--color-ink-light);
    margin: 0;
    font-size: var(--text-body);
  }

  @media (max-width: 640px) {
    .cta {
      padding-top: var(--block-space-double);
      margin-top: var(--block-space-double);
    }

    .cta__content {
      margin-bottom: var(--block-space-1-5);
    }

    .cta__title {
      font-size: var(--text-title-3);
    }
  }
}