.footer-cta-container {
    display: grid;
	max-width: 950px;
    margin: 0 auto;
}

@media (min-width: 64em) {
    .footer-cta-container {
        grid-template-columns: 1fr 1fr;
		column-gap: 70px;
    } 
}

.cta { 
	position: relative; 
	color: var(--charcoal);
	max-width: 300px;
	margin: 0 auto var(--space-8);
	text-align: center;
}

.footer-cta-container > div:nth-child(2) .cta {
	margin-bottom: 0;
}

.cta svg { 
	margin: 0 auto var(--space-4);
}

.cta a:hover { 
	color: currentColor
}
.cta a svg path {
	fill: var(--green);
} 

.cta p { 
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	font-weight: 500;
}

.cta p a { 
	font-weight: 600;
}

.cta h3 {
	font-size: var(--text-2xl-2);
	line-height: var(--leading-none);
	font-family: var(--font-display);
	letter-spacing: var(--tracking-tight);
	font-weight: 600;
}

@media (min-width: 64em) {
	.footer-cta-container{
		position: relative;
	}

	.footer-cta-container::after{
		content: "";
		position: absolute;
		left: 50%;
		transform: translateX(50%);
		width: 2px;
		background-color: var(--charcoal);
		height: 96px;
		top: 35px;
	}

	.cta { 
		max-width: 427px;
		padding-bottom: var(--space-8);
	}
	
	.cta a svg {
		transition: transform 300ms ease;
		margin-bottom: var(--space-3);
	}

	.cta a svg path {
		fill: var(--charcoal);
	} 

	.cta h3 {
		font-size: var(--text-4xl);
		line-height: var(--leading-tight);
		letter-spacing: unset;
	}

	.cta p { 
		font-size: var(--text-xl);
	}
}

@media (min-width: 64em) and (hover: hover) {
	.cta a:hover h3 {
		color: var(--charcoal);
	}
	.cta a:hover svg {
		transform: translateX(8px);
	} 
	.cta a:hover svg path {
		fill: var(--green);
	} 
}