.elementor-1387 .elementor-element.elementor-element-b796cef{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1387 .elementor-element.elementor-element-842de5b.elementor-element{--align-self:center;}.elementor-1387 .elementor-element.elementor-element-b81d89f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-842de5b */.gallery {
    display: flex;
    width: 95vw;
    max-width: 1200px;
    /* We fix height so the aspect ratio is controlled by width only */
    height: 600px;
    gap: 12px;
}

.photo-card {
    position: relative;
    /* Initial state: 9:5 ratio math 
               Since height is 600px, width needs to be 1080px total / 5 
            */
    flex: 1;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;

    /* The 'Magic' Transition */
    transition: flex 0.8s cubic-bezier(0.25, 1, 0.3, 1);
}

.photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Prevents the image from feeling shaky during the container resize */
    transform: scale(1.1);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.3, 1);
}

/* HOVER STATES */

/* 1. Expand the hovered card */
.photo-card:hover {
    /* To hit a roughly 9:16 vertical look while the others shrink */
    flex: 5;
}

.photo-card:hover img {
    transform: scale(1);
}

/* 2. Slightly shrink the siblings */
.gallery:hover .photo-card:not(:hover) {
    flex: 0.4;
    opacity: 0.6;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b796cef */.containergallery {
    margin: 0;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}/* End custom CSS */