.image-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 120px); /* Adjust based on your page's header/footer height */
    overflow: hidden; /* Hide images that are out of bounds */
}

.resizable {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Initial width; adjust as needed */
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: width 0.5s ease-in-out; /* This ensures a smooth transition when the resizable div is resized */
}

.resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px; /* Width of the slider handle */
    background: #FFF; /* Color of the slider handle */
    cursor: ew-resize;
}