.sticky-navigation {
    position: absolute;
    width: fit-content;
    z-index: 10;
}
        
.sticky-navigation .inner {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        background-color: var(--color-5);
        position: relative;
        margin-top: -0.3rem;
        border-top-right-radius: 0.2rem;
        border-bottom-right-radius: 0.2rem;
    }
        
:is(.sticky-navigation .inner) .nav-item {
            padding: 0 0.3rem;
            cursor: pointer;
            opacity: 0.2;
            transition: opacity 0.4s var(--ease);
        }
        
:is(:is(.sticky-navigation .inner) .nav-item):first-of-type {
                padding-top: 0.3rem;
            }
        
:is(:is(.sticky-navigation .inner) .nav-item):last-of-type {
                padding-bottom: 0.3rem;
            }
        
.active:is(:is(.sticky-navigation .inner) .nav-item),:is(:is(.sticky-navigation .inner) .nav-item):hover {
                opacity: 1;
            }
        
@media screen and (max-width: 768px) {
        
    .sticky-navigation {
        position: relative;
        width: 100dvw;
        z-index: 1;
        overflow-x: scroll;
        margin-top: 0.7rem;
}
        
        .sticky-navigation .inner {
            width: fit-content;
            flex-direction: row;
            gap: 0.2rem;
            margin-top: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            padding: 0 0.15rem;
        }

            :is(.sticky-navigation .inner) .nav-item {
                padding: 0;
                opacity: 1;
                white-space: nowrap;
            }

                :is(:is(.sticky-navigation .inner) .nav-item):first-of-type {
                    padding-top: 0;
                }

                :is(:is(.sticky-navigation .inner) .nav-item):last-of-type {
                    padding-bottom: 0;
                }
    }