.slick-dots button:hover, .slick-dots button:focus {
    background-color: transparent !important;
}

.slick-dots li button:before {
    font-size: 10px;
}

.slick-slide {
    margin-right: 20px;
    border-radius: 4px;
    /* width: auto !important; */
}

.slick-slide img {
    box-shadow: 0px 4px 4px 0px #00000040;

box-shadow: 0px 4px 4px 500px #00000033 inset;

border-radius: 4px;

/* width: 100%;
max-width: 80%;
height: auto;
aspect-ratio: 16/9; */
max-width: 400px !important;

}


.slick-next {
    color: #509F33;
    display: none;
}

.slick-prev {
    color: #509F33;
    display: none;
}

.slick-list {
    padding: 0 20% 0 0;
}

.carousel-cwm {
    margin-left: auto;
    position: relative;
}

.carousel-cwm .slick-prev {
    top: 40%;
    transform: translateY(-50%);
    z-index: 1;
}

.carousel-cwm .slick-next {
    top: 60%;
    transform: translateY(-50%);
    z-index: 1;
}

@media (max-width: 768px) {
    .carousel-cwm .slick-prev {
        top: 30%;
    }

    .carousel-cwm .slick-next {
        top: 70%;
    }

    .slick-arrow {
        left: -20px !important;
    }
}

.carousel-cwm .slick-prev:before, .carousel-cwm .slick-next:before {
    font-size: 25px;
}

.slick-arrow {
    position: absolute;
    left: -50px;
    border-radius: 50%;
    padding: 0px !important;
    width: 3rem !important;
    height: 3rem;
}

/* Ajout d'un overlay dégradé sur les slides du carousel */

.slick-slide {
    position: relative;
}

.slick-slide .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 1;
}

.slick-slide .overlay h2 {
    color: white !important;
    font-size: 24px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2;
}