.SIDENAV .link {
    padding: var(--s2) var(--s3);
    margin: var(--s2) 0;
    transition: all .25s;
    cursor: pointer;
    position: relative;
}

.SIDENAV .link a {
    text-decoration: none;
}

.SIDENAV .link a::after {
    content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.SIDENAV .link.active,
.SIDENAV .link:hover {
    background: var(--light-blue-300);
}

.SIDENAV .link.active a,
.SIDENAV .link:hover a {
    color: var(--med-blue-400);
    font-weight: 600;
}

@media screen and (max-width: 960px) {
    .SIDENAV .outer-wrapper {position: sticky;top: 0;z-index: 4;width: 100%;}
    .SIDENAV .inner-wrapper {display: flex;flex-direction: row;overflow: scroll;gap: var(--s4);align-items: center;}
    .SIDENAV .link {width: 100%;}
}