.track{
    width: 100%;
    height: 100%;
    
    overflow: visible;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    transition: padding 0.5s, margin 0.5s, transform 0.5s;

    &{}

    .slide-moderninho &{
        padding-left: 2vw;
    }    

    .mobile &:has(.voltar){
       
    }
    .desktop .slide-moderninho &{
        padding-left: 20vw!important;
    }
}

/* itens do carrossel de categorias */
.track .item{
    flex: 0 0 auto!important;

    transition: all 1s;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;

    &{}

    &.foco{
        z-index: 999999;
    }

    &.anterior:has(+.anterior){
        transform: translateX(-100%);
    }
    &.anterior:has(+.anterior+.anterior){
        transform: translateX(-200%);
    }
    &.anterior:has(+.anterior+.anterior+.anterior){
        transform: translateX(-300%);
    }
    
}
.track .content{
    transition:  all 1s;
    transform: scale(0.9);


    z-index: 1;
    &{}

    .foco &{
        transform: scale(1);
    }
   

    .desktop &{
        
    }
    
}

.btn-contain{
    display: flex;
    width: 122rem;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 10rem;
    position: absolute;
    z-index: 99999;
}

.btn-contain button{
    display: flex;
    width: 68rem;
    height: 68rem;
    justify-content: center;
    align-items: center;
    gap: 10rem;
    flex-shrink: 0;
    border-radius: 100%;
    background: rgba(0, 0, 0, 0.30);
}

.btn-contain button::before{
    content: "";
    width: 100%;
    height: 100%;
    padding: 13rem 17rem;
    background: url('/static/img/seta.v20250827210514.svg');
    background-repeat: no-repeat;
    background-size: 45%;
    background-position: center;
    transition: padding 0.8s, margin 0.8s, transform 0.8s;
}

.btn-contain:has(.btn-left){
    left: 0;
    background: linear-gradient(274deg, rgba(102, 102, 102, 0.00) 2.56%, rgba(255, 255, 255, 0.10) 96.77%);
}

.btn-contain:has(.btn-right){
    right: 0;
    background: linear-gradient(274deg, rgba(0, 0, 0, 0.60) 2.56%, rgba(102, 102, 102, 0.00) 96.77%);
}

button[class$="left"]::before{
    transform: rotate(90deg);
}

button[class$="left"]:hover::before{
    transform: rotate(90deg) scale(1.2);
}

button[class$="left"]:active::before{
    transform: rotate(90deg) scale(0.9);
}



button[class$="right"]::before{
    transform: rotate(-90deg);
}

button[class$="right"]:hover::before{
    transform: rotate(-90deg) scale(1.2);
}

button[class$="right"]:active::before{
    transform: rotate(-90deg) scale(0.9);
}