/*
 * Collage de imagenes de la página de inicio.
 * Es necesario insertar el código de arranque y las librerías css y js de AOS en el head desde custom code en el panel de wordpress en Elementor
 */

.callout-images {
    position: relative !important;
    width: 350px !important;
    height: 350px !important;
    margin: auto !important;
}

.callout-images .callout-image {
    width: 150px !important;
    aspect-ratio: 1 / 0.5;
    position: absolute !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.callout-images .callout-image:hover:not(:first-of-type) {
    z-index : 60 !important;
    transform: scale(1.15) !important;
    transition: transform 0.3s ease-in-out !important;
}

/* colocamos cada capa en un punto distinto */
.callout-images .callout-image--1 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)!important;
    width: 200px !important;
}

.callout-images .callout-image--2 {
    top: 15%;
    left: 0%;
}

.callout-images .callout-image--3 {
    top: 10%;
    right: 5%;
}

.callout-images .callout-image--4 {
    bottom: 7.5%;
    right: 0%;
}

.callout-images .callout-image--5 {
    bottom: 5%;
    left: 5%;
}