.slider-wrapper {
            display: flex;
            align-items: center;
            gap: 20px;
            width: 100%;
            max-width: 1200px;
        }


        /* CARD CONTAINER */
        .image-container {
            position: relative;
            height: 400px;
            width: 320px;
            /* collapsed width */
            overflow: visible;
            transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
            flex-grow: 1;
        }

        /* EXPAND ON HOVER */
        .image-container:hover {
            width: 100%;
        }

        .slide {
            position: relative;
            height: 100%;
            width: 100%;
            display: flex;
            align-items: flex-end;
            gap: 20px;
        }

        /* RIGHT IMAGE (MAIN) - Always visible */
        .img-main {
            position: relative;
            height: 100%;
            width: 100%;
            object-fit: cover;
            border-radius: 18px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
            transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 2;
        }

        /* LEFT IMAGE (HOVER) - Hidden behind right image initially */
        .img-hover {
            position: absolute;
            right: 0;
            bottom: 0;
            height: 75%;
            width: 0;
            object-fit: cover;
            border-radius: 18px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
            opacity: 0;
            transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1;
        }

        /* HOVER STATE */
        .image-container:hover .img-hover {
            width: calc(40% - 10px);
            /* 40% width with gap consideration */
            right: calc(60% + 20px);
            /* Position to the left with gap */
            opacity: 1;
        }

        .image-container:hover .img-main {
            width: 60%;
            margin-left: auto;
        }