.salon-gallery-21ee48ca {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.salon-wall-container-21ee48ca {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    /* Elementor controls will override gap and max-height */
}

/* Wall items scaling */
.salon-wall-container-21ee48ca .salon-item-wrap-21ee48ca {
    flex: 0 0 auto;
    width: calc(150px * var(--size-factor, 1));
    max-width: 30vw;
}

.salon-featured-wrapper-21ee48ca {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.salon-caption-container-21ee48ca {
    width: 100%;
    overflow: hidden;
}

.salon-caption-21ee48ca {
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}

.salon-caption-21ee48ca.is-animating-out {
    opacity: 0;
    transform: translateY(-10px);
}

.salon-caption-21ee48ca.is-animating-in {
    opacity: 0;
    transform: translateY(10px);
}

.salon-featured-container-21ee48ca {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
    /* Elementor controls override max-width */
}

.salon-item-wrap-21ee48ca {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    cursor: pointer;
    box-sizing: border-box;
}

.salon-featured-container-21ee48ca .salon-item-wrap-21ee48ca {
    /* Allow the width to naturally follow the image instead of forcing 100% */
    width: auto; 
    cursor: default;
}

.salon-image-21ee48ca {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                height 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: width, height, max-width;
    display: block;
}

.salon-wall-container-21ee48ca .salon-image-21ee48ca {
    max-height: 40vh;
}

.salon-featured-container-21ee48ca .salon-image-21ee48ca {
    /* Increased max height for portraits, controlled via widget setting */
    max-height: 100vh;
    width: auto;
}

.salon-wall-container-21ee48ca .salon-item-wrap-21ee48ca:hover {
    transform: scale(1.05);
    z-index: 2;
}

@media (max-width: 767px) {
    .salon-wall-container-21ee48ca .salon-item-wrap-21ee48ca {
        width: calc(80px * var(--size-factor, 1));
        max-width: 40vw;
    }
}