.lienzo-tabs {
    border: 1px solid var(--wp--preset--color--quinary);
    border-radius: 15px;
    background: var(--wp--preset--gradient--neon);

    & .content-nav{
        width: 100%;
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 18px;
        padding: 24px 14px;
        border-bottom: 1px solid var(--wp--preset--color--quinary);

        & > i {
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--wp--preset--color--secondary);
            background: var(--wp--preset--color--primary);
            color: var(--wp--preset--color--secondary);
            height: 50px;
            width: 50px;
            font-size: 1.25rem;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.6s ease;

            &:hover{
                background: var(--wp--preset--color--secondary);
                color: var(--wp--preset--color--primary);
            }
        }
    
        & nav {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: calc((100% / 4) - 22.5px);
            gap: 30px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            scrollbar-width: none;
    
            &::-webkit-scrollbar{
                display: none;
            }
    
            & > button{
                /*max-width: 300px;*/
                scroll-snap-align: start;
                outline: none;
                padding: var(--wp--preset--spacing--s);
                background: transparent;
                border: 1px solid var(--wp--preset--color--quinary);
                border-radius: 16px;
                color: var(--wp--preset--color--text-primary);
                font-size: var(--wp--preset--font-size--large);
                cursor: pointer;
                transition: all 0.6s ease;

                & > span{
                    display: block;
                    margin-top: 8px;
                    font-size: var(--wp--preset--font-size--medium);
                    color: var(--wp--preset--color--text-secondary);
                    transition: all 0.6s ease;
                }
    
                &:hover, &.active{
                    color: var(--wp--preset--color--secondary);
                    background: var(--wp--preset--color--sextary);
                    border: 1px solid var(--wp--preset--color--secondary);

                    & > span{
                        color: var(--wp--preset--color--secondary);
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1200px){
    .lienzo-tabs {

        & .content-nav nav{
            grid-auto-columns: calc((100% / 3) - 20px);
        }           
    }
}

@media screen and (max-width: 900px){
    .lienzo-tabs .content-nav nav{
        grid-auto-columns: calc((100% / 2) - 15px);
    }
}

@media screen and (max-width: 600px){
    .lienzo-tabs .content-nav nav{
        grid-auto-columns: 100%;
    }
}