@layer components {
	.cta-section {
		background-color: var(--color-bg-dark);
		padding-block: calc(var(--stack) * 3.5);
	}

	.cta-section__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: calc(var(--gutter) * 1.5);
	}

	@scope (.cta-section) {
		h2 {
			color: var(--color-text-invert);
			text-wrap: balance;
		}

		p {
			font-size: var(--font-size-lg);
			color: var(--color-text-muted-invert);
			max-inline-size: 52ch;
			text-wrap: balance;
		}
	}
}