.cta {
	position: relative;
}

.cta--gradient {
	background: linear-gradient(
		45deg,
		var(--darybreak-blue) 0%,
		var(--apricot-glow) 100%
	);
}

.cta__bg {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.05;
}

.cta__wrapper {
	position: relative;
	text-align: center;
	z-index: 1;
}

.cta--gradient {
	color: #fff;
}

.cta--gradient h2,
.cta--gradient .h2,
.cta--gradient h3,
.cta--gradient .h3,
.cta--gradient h4,
.cta--gradient .h4,
.cta--gradient h5,
.cta--gradient .h5,
.cta--gradient h6,
.cta--gradient .h6,
.cta--gradient .sub-heading {
	color: #fff;
}

.cta--gradient p:not(.sub-heading) {
	margin: 0 0 30px 0;
}

.cta__wrapper__btns .btn + .btn {
	margin-top: 24px;
}

.cta--padding {
	padding: 45px 0;
}

.cta--solid {
	background: var(--first-light);
}

.cta--gradient a:not(.btn) {
	color: var(--first-light);
	background-image: linear-gradient(
		transparent calc(100% - 2px),
		var(--first-light) 2px
	);
}

.cta-banner-bg {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (min-width: 768px) {
	.cta__wrapper__btns .btn + .btn {
		margin-top: 0;
		margin-left: 25px;
	}

	.cta__wrapper__btns {
		margin-top: 40px;
	}

	.cta--solid .cta__wrapper__btns {
		margin-top: 0;
	}

	.cta--padding {
		padding: 60px 0;
	}
}

@media (min-width: 1200px) {
	.cta__wrapper {
		padding: 0 32px;
	}

	.cta--padding {
		padding: 100px 0;
	}
}