.quick-links {
	--link-color: var(--white);
	--link-color-hover: var(--white);

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 24px;
	padding: 0 var(--space-5);
}

.quick-links .link {
	position: relative;
	font-family: var(--font-body);
	font-size: calc(18px + (20 - 18) * ((100vw - 1025px) / (1200 - 1025)));
	color: var(--link-color);
	text-transform: uppercase;
	font-weight: 500;
}

.quick-links .link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(0);
    width: 100%;
    height: 2px;
    background-color: var(--yellow);
    opacity: 0;
    transition: opacity ease-out 300ms, transform ease-out 300ms;
}

@media (min-width: 1200px) {
	.quick-links .link {
		font-size: var(--text-xl);
	}
}

@media (hover: hover) {
	.quick-links .link:hover {
		color: var(--link-color-hover);
	}

	.quick-links .link:hover::after {
		transform: translateY(-4px);
		opacity: 1;
	}
}