.navigation-formation {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-block: 24px;
    position: sticky;
    top: 42px;
    background: #fff;
    z-index: 21;

    @media (width > 768px) {
        margin-block: 48px;
    }

    @media (max-width: 768px) {
        &::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 16px;
            width: 28px;
            background: linear-gradient(to right, transparent, #fff);
            pointer-events: none;
        }
    }

    h2 {
        color: var(--_bg-color);
        margin-bottom: 0;
    }

    ul {
        display: flex;
        align-items: center;
        gap: 10px;
        list-style: none;
        margin: 0;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        scrollbar-color: #EAEAEA transparent;

        &.has-scroll {
            padding-bottom: 16px;
        }

        li {
            display: flex;
            align-items: center;
            margin: 0;
            white-space: nowrap;
            height: 60px;
            padding-inline: 12px;
            font-size: 1.8rem;
            font-weight: 500;
            border-bottom: 4px solid transparent;
            cursor: pointer;

            a {
                text-decoration: none;
                
                &:hover {
                    color: var(--_bg-color);
                }
            }

            &.current {
                a {

                    color: var(--_bg-color);
                    border-color: var(--_bg-color);

                }
            }

            
        }
    }

    ul::-webkit-scrollbar {
        height: 1px; /* 1px ou 2px */
        margin-top: 8px;
    }
    ul::-webkit-scrollbar-track {
        background: transparent; /* ou #f5f5f5 */
    }

    ul::-webkit-scrollbar-thumb {
        background: #EAEAEA;
        border-radius: 999px;
    }
}