.ba-882-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    user-select: none;
    line-height: 0; /* Fix vertical gaps with images */
}

.ba-882-image-container {
    width: 100%;
    height: 100%; /* Important for maintaining aspect ratio */
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

/* 
   We need a way to set the height of the container based on the image aspect ratio.
   A simple way is to let the "After" image define the natural height of the container
   by being position: relative. 
*/
.ba-882-after {
    position: relative;
    z-index: 1;
}

.ba-882-before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 50%; /* Default starting point */
    height: 100%;
    /* Max width must be 100% of PARENT, but since we are clipping, 
       we need the inner image to always be full width of the CONTAINER 
       to match the other image perfectly. */
}

.ba-882-image-container img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none; /* Important: allow image to retain full width even inside clipped container */
}

/* 
   The 'Before' image inside the clipped container needs to be the full width of the MAIN container,
   not the clipped container. 
*/
.ba-882-before img {
    width: 100%; 
    height: 100%;
    object-fit: cover; /* Ensure it covers the area */
}

/* If vertical mode, we clip height instead of width */
.ba-882-vertical .ba-882-before {
    width: 100%;
    height: 50%; /* Default */
    border-bottom: none;
}
.ba-882-vertical .ba-882-before img {
    height: 100%; /* Will be stretched if we don't fix the container relationship */
    /* Correction: For vertical wipe, we need the inner image to have height of the full container */
}
/* JS handles the 'width' or 'height' property of .ba-882-before directly */


/* Handle */
.ba-882-handle {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: 50%;
    pointer-events: all; /* Ensure click/drag works */
    cursor: ew-resize;
}

.ba-882-vertical .ba-882-handle {
    top: 50%;
    left: 0;
    right: 0;
    bottom: auto;
    cursor: ns-resize;
}

.ba-882-handle-bar {
    position: absolute;
    background-color: #fff;
    width: 2px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.ba-882-vertical .ba-882-handle-bar {
    width: 100%;
    height: 2px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.ba-882-handle-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    /* Margins handled by JS or CSS calc in controls */
    margin-left: -20px;
    margin-top: -20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

/* Labels */
.ba-882-label {
    position: absolute;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 3px;
    z-index: 4;
    pointer-events: none; /* Let clicks pass through to handle */
}

/* Labels Position logic */
.ba-882-labels-pos-top .ba-882-label { top: 10px; }
.ba-882-labels-pos-bottom .ba-882-label { bottom: 10px; }
.ba-882-labels-pos-middle .ba-882-label { top: 50%; transform: translateY(-50%); }

.ba-882-label-before { left: 10px; }
.ba-882-label-after { right: 10px; }

/* In vertical mode, adjust labels if needed, or keep left/right */
.ba-882-vertical .ba-882-label-before { top: 10px; bottom: auto; left: 50%; transform: translateX(-50%); }
.ba-882-vertical .ba-882-label-after { bottom: 10px; top: auto; left: 50%; transform: translateX(-50%); }

/* Fix stacking context for vertical layout specifically regarding the image inside clipped div */
.ba-882-container {
    /* Ensure aspect ratio is respected based on first image */
}
.ba-882-before img {
    /* Critical: The image inside the sliding div must remain static relative to the main container */
    /* This requires the image to be the size of the container, even if the container is smaller */
    /* But standard CSS 'width: 100%' makes it shrink. */
    /* We need to force it to match the 'ba-882-after' image dimensions. */
    /* Since we can't easily query that in pure CSS without a fixed height, we rely on absolute positioning 
       and ensuring the aspect ratio is driven by the bottom image. */
    
    /* Trick: make the before image absolute to the MAIN container, but inside the .ba-882-before wrapper? 
       No, .ba-882-before is the wrapper that shrinks.
       So the IMG inside it must be sized to the Main Container. */
}

/* Fix for the "Squashed Image" issue in slider */
.ba-882-before {
    /* Create a new stacking context? */
}

.ba-882-before img {
    /* Important: We need to force this image to be the same size as the container */
    /* Since the container size is defined by the .ba-882-after image (which is relative), 
       we can try to force the inner image to match. */
    width: 100%; /* This means 100% of the SLIDING container, which is bad. */
    
    /* BUT wait, if the parent (.ba-882-before) is absolute 0,0, and has width 50%, 
       setting img width to 100% makes it 50% width effectively.
       
       Solution: The image inside the slider needs: 
       width: (100 / current_percentage) * 100 % ? No too complex for CSS.
       
       Better Solution: 
       Use 'clip-path' on the top image wrapper instead of changing width?
       Elementor often uses the width method. 
       
       Let's use the standard "Absolute Image Sizing" trick:
       The .ba-882-before container changes width.
       The IMG inside it must act as if it's full width.
    */
    width: 100vw; /* Fallback? No */
    max-width: none;
}

/* REVISED CSS FOR SLIDING MASK */
/* We will actually use the container's width/height to size the inner image */
/* Since we don't know the pixel size, we can use a JS fix OR we can try: */

.ba-882-before {
    overflow: hidden; /* This clips the content */
}

.ba-882-before img {
    /* This is the key: */
    width: 100%; /* This is wrong for the slider effect */
}

/* 
   CORRECT APPROACH for responsive width sliding without squashing:
   We need the inner image to be the exact same size as the outer container.
   Since the outer container size is dynamic, we can set the inner image to be:
   width: 100% of the *Grandparent*? 
   
   Actually, a simpler way is using CSS variables or JS to sync sizing. 
   BUT, let's look at how others do it. 
   They usually set the inner image width to the container width in pixels via JS on resize.
*/

/* Let's rely on a JS resize helper for perfect 'fit' or use a strict aspect ratio. */
/* OR simpler: Object-fit cover + 100% height/width of parent? */

/* 
   Let's try this: 
   .ba-882-before is the 'mask'.
   The image inside should be sized to the full container.
   If .ba-882-before is 50% width, the image inside should still be 100% of main container.
   
   We can achieve this by: 
   .ba-882-before { width: 50%; overflow: hidden; }
   .ba-882-before img { width: 200%; } -> If at 50%. 
   
   This is hard to calculate in CSS.
   
   BETTER: 
   Use 'clip-path: inset(...)'. 
   Then the .ba-882-before can be width: 100% always! 
   And we just animate the clip-path.
   This avoids all image squashing issues!
*/

/* RE-REVISED CSS using CLIP-PATH */

.ba-882-before {
    width: 100%; /* Always full width */
    height: 100%;
    /* We will use clip-path in JS or inline style if supported */
    /* Fallback for older browsers: use width method and JS fix */
}

/* 
   Wait, the JS I wrote uses .css('width', percentage). 
   Let's stick to the width method but FIX the image size inside. 
   
   We can make the inner image absolute and simply NOT 100% width of its parent?
   We can set: 
   .ba-882-before img { width: [ContainerWidth]px; } 
   This requires JS. 
   
   Let's add a small JS routine to fix the image width on resize.
   See script.js update.
*/

/* Actually, there is a CSS-only trick: */
.ba-882-before img {
   /* If we set the width to the container's width... which is 100% of .ba-882-container */
   /* We can't reference that from inside the child easily without container queries or grids. */
}

/* 
   Let's adjust script.js to set the width of the before-image specifically.
   Actually, let's use the `clip-path` method in the JS as it's cleaner. 
   But `clip-path` support is good now.
   
   Let's update the JS to use clip-path instead of width/height for the container.
   Then CSS is simple:
*/

.ba-882-before {
    width: 100%;
    height: 100%;
    /* No cropping via width/height here anymore */
}

/* We will handle the "revealing" via inline clip-path style in JS */