/* ==========================================================================
   Overlapping Images Element (Base Styles)
   ========================================================================== */

/* Outer Wrapper Alignment Classes */
.custom-overlapping-outer-wrapper {
    width: 100%;
    display: block;
}
.custom-overlapping-outer-wrapper.align-left { text-align: left; }
.custom-overlapping-outer-wrapper.align-center { text-align: center; }
.custom-overlapping-outer-wrapper.align-right { text-align: right; }

/* Base Container shared by both styles */
.custom-overlapping-images-wrapper {
    position: relative;
    display: inline-block;
}

/* Base Image Styling (Shared properties like borders and shadows) */
.custom-overlapping-images-wrapper .custom-main-img {
    max-width: none !important;
    border-radius: 20px !important;
    object-fit: cover !important; 
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.08); 
    display: block;
    margin-bottom: 0 !important;
}

.custom-overlapping-images-wrapper .custom-overlap-img {
    position: absolute;
    bottom: 0;
    max-width: none !important;
    border-radius: 20px !important;
    object-fit: cover !important;
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.12); 
    z-index: 2; 
    background-color: #f5f5f5; 
    margin-bottom: 0 !important;
}


/* ==========================================================================
   Style 1: Square, Bottom Left Overlap
   ========================================================================== */

.custom-overlapping-outer-wrapper.style-1 .custom-overlapping-images-wrapper {
    padding-left: 60px;
    padding-bottom: 60px;
}
.custom-overlapping-outer-wrapper.style-1 .custom-main-img {
    width: 400px !important;
    height: 400px !important;
}
.custom-overlapping-outer-wrapper.style-1 .custom-overlap-img {
    left: 0;
    width: 220px !important;
    height: 220px !important;
}


/* ==========================================================================
   Style 2: Portrait, Bottom Right Overlap
   ========================================================================== */

.custom-overlapping-outer-wrapper.style-2 .custom-overlapping-images-wrapper {
    padding-right: 60px; /* Padding shifts to the right for the overlap */
    padding-bottom: 60px;
}
.custom-overlapping-outer-wrapper.style-2 .custom-main-img {
    width: 400px !important;
    height: 520px !important; /* Portrait height */
}
.custom-overlapping-outer-wrapper.style-2 .custom-overlap-img {
    right: 0; /* Snaps to the right edge */
    width: 240px !important;
    height: 320px !important; /* Portrait height */
}


/* ==========================================================================
   Style 3: Portrait, Bottom Left Overlap
   ========================================================================== */

.custom-overlapping-outer-wrapper.style-3 .custom-overlapping-images-wrapper {
    padding-left: 60px;
    padding-bottom: 60px;
}

.custom-overlapping-outer-wrapper.style-3 .custom-main-img {
    width: 400px !important;
    height: 520px !important;
}

.custom-overlapping-outer-wrapper.style-3 .custom-overlap-img {
    left: 0;
    width: 240px !important;
    height: 320px !important;
}

/* ==========================================================================
   Mobile Responsiveness
   ========================================================================== */

@media only screen and (max-width: 767px) {
    /* Style 1 Mobile Settings */
    .custom-overlapping-outer-wrapper.style-1 .custom-overlapping-images-wrapper {
        padding-left: 15%;
        padding-bottom: 15%;
        width: 85%; 
        box-sizing: border-box;
    }
    .custom-overlapping-outer-wrapper.style-1 .custom-main-img,
    .custom-overlapping-outer-wrapper.style-1 .custom-overlap-img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important; 
    }
    .custom-overlapping-outer-wrapper.style-1 .custom-overlap-img {
        width: 45% !important;
    }

    /* Style 2 Mobile Settings */
    .custom-overlapping-outer-wrapper.style-2 .custom-overlapping-images-wrapper {
        padding-right: 15%; /* Shift padding for mobile */
        padding-bottom: 15%;
        width: 85%; 
        box-sizing: border-box;
    }
    .custom-overlapping-outer-wrapper.style-2 .custom-main-img,
    .custom-overlapping-outer-wrapper.style-2 .custom-overlap-img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3 / 4 !important; /* Portrait aspect ratio on mobile */
    }
    .custom-overlapping-outer-wrapper.style-2 .custom-overlap-img {
        width: 45% !important;
    }
    /* Style 3 Mobile Settings */
.custom-overlapping-outer-wrapper.style-3 .custom-overlapping-images-wrapper {
    padding-left: 15%;
    padding-bottom: 15%;
    width: 85%;
    box-sizing: border-box;
}

.custom-overlapping-outer-wrapper.style-3 .custom-main-img,
.custom-overlapping-outer-wrapper.style-3 .custom-overlap-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
}

.custom-overlapping-outer-wrapper.style-3 .custom-overlap-img {
    width: 45% !important;
}
}