#tbc-carousel{
    position:relative;
    width:100%;
    overflow:hidden;
    padding: 0 0 10px;
}

#tbc-carousel *{
    box-sizing:border-box;
}

#tbc-carousel .tbc-track{
    display:flex;
    gap:30px;
    transform:translate3d(0,0,0);
    will-change:transform;
    backface-visibility:hidden;
}

#tbc-carousel .tbc-slide{
    flex:0 0 450px;
    width:450px;
    height:296px;

    display:block;
    overflow:hidden;

    border-radius:14px;

    background:#fff;

    box-shadow:
        4px 8px 16px rgba(0,0,0,.12),
        6px 16px 30px rgba(0,0,0,.16);


    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


#tbc-carousel .tbc-slide img{
    display:block;
    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:inherit;
}

#tbc-carousel .tbc-slide:hover{

    box-shadow:
        0 8px 18px rgba(0,0,0,.18),
        0 18px 45px rgba(0,0,0,.24);
}

#tbc-carousel .tbc-slide:hover img{

    filter:brightness(1.12);

}

#tbc-carousel .tbc-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,.45);
    color:#fff;
    cursor:pointer;
    z-index:10;
}


#tbc-carousel .tbc-btn:hover{

    background:#fff;
    color:#333;
    transform:translateY(-50%) scale(1.08);
}


#tbc-carousel .tbc-prev{ left:15px; }
#tbc-carousel .tbc-next{ right:15px; }

#tbc-carousel .tbc-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:20px;
}

#tbc-carousel .tbc-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#ccc;
    cursor:pointer;
}

#tbc-carousel .tbc-dot.active{
    background:#222;
}

@media(max-width:768px){

    #tbc-carousel .tbc-track{
        gap:12px;
    }

    #tbc-carousel .tbc-slide{
        flex:0 0 276px;
        width:276px;
        height:auto;
        aspect-ratio:450 / 296;
    }
}