.header-link {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 700;
	line-height: var(--leading-none);
	letter-spacing: var(--tracking-normal);
	color: var(--white);
	min-height: 30px;
	min-width: 68px;
}

.header-link i {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--text-base);
	min-height: 30px;
	height: 30px;
	min-width: 30px;
	width: 30px;
	color: var(--gray);
	background: var(--light-blue);
	border-radius: var(--rounded-full);
}

.header-link .text-content { max-width: var(--space-8); }

@media (hover: hover) {
	.header-link:hover {
		text-decoration: none;
		color: var(--white);
	}
}

@media (min-width: 64em) {
	.header-link i  { font-size: var(--text-xs); }
}