.header-cta {
	display: flex;
	align-items: center;
	gap: 10px;
}

.header-cta > a {
	font-family: var(--font-display);
	font-size:var(--text-base);
	font-weight: 500;
	line-height: var(--leading-none);
	letter-spacing: var(--leading-normal);
	text-transform: uppercase;
	color: var(--white-fd);
	text-decoration: none;
	transition: opacity 300ms ease-out;
}

.header-cta i {
	color: var(--blue-66);
	font-size: var(--text-base);
}

@media (hover: hover) {
	.header-cta > a:hover {
		color: var(--white-fd);
		text-decoration: none;
		opacity: 0.8;
	}
}

@media (min-width: 64em) {
	.header-cta > a {
		font-size:var(--text-sm);
	}
}