.cta--primary-bg {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
}
.cta--primary-bg h2 {
	color: var(--color-text-inverse);
}
.cta--primary-bg .btn--secondary {
	color: var(--color-text-inverse);
	border-color: var(--color-text-inverse);
}
.cta--primary-bg .btn--secondary:hover {
	background-color: var(--color-text-inverse);
	color: var(--color-primary);
}

.cta__inner {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-s);
}

.cta__text {
	opacity: 0.85;
	max-width: 50ch;
}

.cta__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-self: stretch;
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-s);
	margin-top: var(--space-2xs);
}

.cta__actions .btn {
	width: 100%;
}

@media (min-width: 64rem) {
	.cta__actions {
		flex-direction: row;
		align-items: center;
		align-self: auto;
		width: auto;
	}

	.cta__actions .btn {
		width: auto;
	}
}