.quick-links {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 20px;
}

.quick-links .link {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--font-display);
	font-weight: bold;
	font-size: var(--text-xl);
	line-height: 1;
	text-decoration: none;
	color: inherit;
}

.quick-links .link::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	scale: 1 0.29;
	transform-origin: center bottom;
	display: none;
	content: '';
	background: var(--magenta);
	transition: scale var(--transition-appendix);
}

.quick-links .link:nth-child(4n - 2)::before {
	background: var(--orange);
}

.quick-links .link:nth-child(4n - 1)::before {
	background: var(--purple);
}

.quick-links .link:nth-child(4n)::before {
	background: var(--blue-mid-light);
}

.quick-links .link::after {
	font: var(--fa-font-solid);
	font-size: 0.9375rem;
	color: var(--blue-mid-light);
	content: '\f35d';
}

/*---- in top bar -----*/

.top-bar .quick-links {
	flex-direction: row;
	align-items: baseline;
	justify-content: end;
	gap: 24px;
}

.top-bar .quick-links .link {
	display: inline-block;
	padding-bottom: 5px;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.top-bar .quick-links .link::before {
	display: block;
}

.top-bar .quick-links .link::after {
	display: none;
}

/*---- microsite (black) theme -----*/

.theme-microsite .quick-links .link::after {
	display: none;
}

.theme-microsite .quick-links .link::before {
	background: var(--blue-mid-light);
}

.theme-microsite .quick-links .link:nth-child(4n - 2)::before {
	background: var(--magenta);
}

.theme-microsite .quick-links .link:nth-child(4n - 1)::before {
	background: var(--orange);
	
}

.theme-microsite .quick-links .link:nth-child(4n)::before {
	background: var(--purple);
}

/*---- lavender theme -----*/

.theme-lavender .quick-links .link::after {
	display: none;
}

/*---- media queries -----*/

@media (hover: hover) {
	.top-bar .quick-links .link:hover::before {
		scale: 1;
	}
}