.link--primary {
	font-weight: 600;
	color: var(--primary) !important;
	font-size: var(--text-xl);
	position: relative;
	text-decoration: none !important;
}

.link--primary::after {
	content: "";
	position: absolute;
	bottom: -10px;
	width: 100%;
	height: 2px;
	background: var(--primary);
	left: 0;
	transition: 0.2s ease-out;
	z-index: -1;
}

@media screen and (min-width: 1026px) {
	.link--primary:is(:hover, :focus-visible)::after {
		height: 13px;
	}
}
@media screen and (max-width: 1025px) {
	.link--primary {
		font-size: var(--text-l) !important;
	}
}
