/***** GLOBAL DOUBLE CTA *****/
.double-cta {
	background: var(--color-gray-100);
}

.double-cta h2,
.double-cta .large-text-cta span:last-child {
	color: var(--color-white);
	font-weight: 600;
}

.double-cta .large-text-cta span:last-child {
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.3s ease;
}

.double-cta p {
	color: inherit;
}

.double-cta p,
.double-cta .eyebrow,
.double-cta h2 {
	margin: 0;
}

/* Additional button margin */
.double-cta .btn {
	margin: 44px 0 0;
}

/***** LEFT / RIGHT COLORS *****/
.double-cta .left-cta {
	background: var(--color-blue-700);
	color: var(--color-white);
}

.double-cta .left-cta .eyebrow {
	color: var(--color-blue-300);
}

.double-cta .right-cta {
	background: var(--color-blue-300);
	color: var(--color-white);
}

.double-cta .right-cta .eyebrow {
	color: var(--color-white);
}

/***Layouts***/

/*Matching CTAs*/
.double-cta .large-text-only .large-text-cta,
.double-cta .plain-text-only .plain-text-cta {
	grid-column: span 6;
}

/*Not Matching CTAs*/
.double-cta .split .large-text-cta {
	grid-column: span 4;
}

.double-cta .split .plain-text-cta {
	grid-column: span 8;
}

/***Large Text CTA***/
.double-cta .large-text-cta {
	align-items: center;
	border-radius: 12px;
	display: flex;
	gap: 12px;
	flex-direction: column;
	justify-content: center;
	padding: 56px 32px;
	text-align: center;
	min-height: 200px;
}

.double-cta .large-text-cta:hover span:last-child,
.double-cta .large-text-cta:focus span:last-child {
	text-decoration-color: currentColor;
}

/***Plain Text CTA***/
.double-cta .plain-text-cta {
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	padding: 32px;
}


.double-cta a.left-cta:hover,
.double-cta a.left-cta:focus {
	background: var(--color-blue-600);
}

.double-cta a.right-cta:hover,
.double-cta a.right-cta:focus {
	background: var(--color-blue-400);
}

.double-cta .container>a {
	transition: background 0.3s ease;
}


/* Media Queries */
@media (max-width: 64rem) {

	.double-cta .large-text-only .large-text-cta,
	.double-cta .plain-text-only .plain-text-cta,
	.double-cta .split .large-text-cta,
	.double-cta .split .plain-text-cta {
		grid-column: 1 / -1;
	}

	.double-cta .plain-text-cta {
		padding: 24px;
	}

	.double-cta .large-text-cta {
		padding: 32px 24px;
	}

}