.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    background: #fff;
    transition : width 1s ease-in-out;
}

.swiper-slide:hover{
    width : 450px!important;
}

.contener-img{
    width:100%;
    height:453px;
    position: relative;
    display: inline-block;
}

.carousel-img {
    width: 100%;
    height: 100%!important;
    object-fit: cover;
    object-position: left;
    display:block;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.373); /* Ajuste l'opacité ici */
}

.preview{
    z-index: 5;
    position: absolute;
    bottom: 3%;
    color: white;
    margin-left: 5%;
    margin-right: 5%;
}

.marker{
    color:white;
}

@media screen and (max-width:1366px) {

}

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

}

@media screen and (max-width:1024px) {

}

@media screen and (max-width:767px) {

    .swiper-slide {
        width: 223px!important;
        transition : unset;
    }

    .swiper-slide:hover{
        width: 223px!important;
    }
    

    .contener-img{
        width:auto;
        height:370px;
        position: relative;
        display: inline-block;
    }

    .preview{
        top: 70%;
    }
}