/* CTA
--------------------------------------------- */

.cta {
	padding: var(--wp--custom--layout--block-gap-xl) 0;
	text-align: center;
}

@media (width <768px) {
	.cta {
		padding: var(--wp--custom--layout--block-gap-xl) 0;
	}
}

.cta__title {
	font-size: var(--wp--preset--font-size--fluid-32);
	max-width: 75%;
	margin: 0 auto 2rem auto;
}

.cta__body {
	font-size: var(--wp--preset--font-size--body-lg);
	max-width: 75%;
	margin: 2rem auto;
}

.cta a {
	margin: 0 0.5rem;
}


/* Variations
--------------------------------------------- */

.cta.bg-white,
.cta.bg-gray {

	.cta__title,
	.cta__body {
		color: var(--wp--preset--color--cobalt);
	}
}

.cta.bg-cobalt,
.cta.bg-emerald {

	.cta__title,
	.cta__body {
		color: var(--wp--preset--color--white);
	}
}

.bg-image {
	color: var(--wp--preset--color--white);

	.cta__title,
	.cta__body {
		color: var(--wp--preset--color--white);
	}
}

.cta.smaller-title {
	.cta__title {
		font-size: var(--wp--preset--font-size--fluid-24);
	}
}

.cta.text-dark {
	.cta__title {
		color: var(--wp--preset--color--stone);
	}
}

.cta.button-secondary {
	&>.container>.button--primary {
		background-color: transparent;
		border: 1px solid var(--wp--preset--color--emerald);
		color: var(--wp--preset--color--emerald);

		&:hover,
		&:focus,
		&:active {
			background-color: var(--wp--preset--color--emerald);
			color: var(--wp--preset--color--white);
		}
	}
}

.cta.container-small>.container {
	max-width: 800px;
}