.elementor-907 .elementor-element.elementor-element-7af0c8b{--e-image-carousel-slides-to-show:5;}.elementor-907 .elementor-element.elementor-element-7af0c8b .swiper-wrapper{display:flex;align-items:flex-end;}@media(max-width:1366px){.elementor-907 .elementor-element.elementor-element-7af0c8b{--e-image-carousel-slides-to-show:4;}}/* Start custom CSS for image-carousel, class: .elementor-element-7af0c8b */.elementor-907 .elementor-element.elementor-element-7af0c8b .elementor-image-carousel.swiper-wrapper {
    height: 300px;
    align-items: flex-end;
    
}

/* 1. Achicamos un poco todas las imágenes y les damos una transición suave */
.elementor-907 .elementor-element.elementor-element-7af0c8b .swiper-slide {
    min-width: 250px;
    transition: all 0.5s ease-in-out;
    transform: scale(1); /* Hace las fotos laterales un 15% más pequeñas */
    display: flex;
    align-items: flex-end;
}

/* 2. Agrandamos la imagen que queda en el centro */
/* Nota: En un carrusel de 3, la clase activa es la primera a la izquierda, por lo que la del medio es "swiper-slide-next" */
.elementor-907 .elementor-element.elementor-element-7af0c8b .swiper-slide.swiper-slide-next {
    height: 300px;
    min-width: 400px;
    transform: scale(1); /* Agranda la foto central un 10% por sobre su tamaño original */
    z-index: 10; /* Asegura que se superponga a las demás si están muy juntas */
}

/* 3. Ajuste opcional para móviles: quitar el efecto si solo se muestra 1 foto */
@media (max-width: 767px) {
    .elementor-907 .elementor-element.elementor-element-7af0c8b .swiper-slide {
        transform: scale(1);
        opacity: 1;
    }
}/* End custom CSS */