.carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 490px;
}

.carousel__images {
    display: flex;
    transition: transform 0.3s ease-in-out;
}

.carousel__image {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel__dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
}

.carousel__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: gray;
    cursor: pointer;
    transition: background 0.3s;
}

.carousel__dot--active {
    background: white;
}

.carousel-indicators [data-bs-target] {
    width: 50px !important;
    height: 9px !important;
}

.carousel-watched{
    background-color: rgb(33,176,171) !important;
}

.carousel-unwatched{
    background-color:rgb(231,51,67) !important;
}

.icon{
    font-size: 4rem;
    position: absolute;
    top:20px;
    right:43px;
}

.icon-check{
    color: rgb(33,176,171);
}

.icon-uncheck{
    color: rgb(231,51,67);
}