.element-cta {
	--cta-gap: var(--gap-md);
	--cta-padding: var(--size-5);
	--max-content-width: 100%;

	.col-full {
		.cta > * {
			max-width: var(--max-content-width);
			margin: 0 auto;
			width: 100%;
		}

	}

	@media (min-width: 768px) {
		--cta-gap: var(--gap-lg);
		--cta-padding: var(--padding-md);
		--max-content-width: 544px;
	}

	@media (min-width: 768px) and (max-width: 1279.99px){
		max-width: 798px;
	}

	@media (min-width: 1280px) {
		--cta-gap: var(--gap-lg);
		--cta-padding: var(--padding-xl);
		--max-content-width: 752px;
	}
}

.cta {
	--cta-bg: var(--element-bg);
	--cta-btn-contrast-color: var(--element-text);

	display: flex;
	flex-direction: column;
	gap: var(--cta-gap);
	padding: var(--cta-padding);
	background-color: var(--cta-bg);
	color: var(--element-text);
	border-radius: var(--radius-5xl);
	border: var(--element-border);
	isolation: isolate;

	.btn.secondary:not(:focus):not(:focus-visible) {
		--element-border: var(--border-xs) solid var(--color-secondary);
	}

	.btn {
		&:hover::after {
			background-color: var(--cta-btn-contrast-color);
		}

		&:focus,
		&:focus-visible {
			outline-color: var(--cta-btn-contrast-color);
		}
	}

	> p {
		font-size: var(--font-size-base);
	}
}

.cta-button-wrapper {
	display: flex;
	justify-content: center;
}

.cta-btn {
	width: fit-content;
}