/* Container for both divs */
#mainContainer {
    display: flex;
    flex-wrap: wrap; /* For responsiveness */
    justify-content: space-between;
    margin: 0 auto;
}

/* Divs taking 50% of width on desktop with a gap */
.wrapperPreviewSofaImage,
#addToCart {
    width: 48%; /* 50% minus a small margin */
}
/* WrapperPreviewSofaImage custom behavior */
#galleryWrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 47%;
    height: 100%; /* Adjust height as per your needs */
}
.wrapperPreviewSofaImage{
    width: 100%;
}
.wrapperPreviewSofaImage img {
    width: 100%;
    height: auto; /* Keep the image ratio */
    object-fit: cover; /* Ensures image covers the div */
    max-width: unset;
    height: unset;
}

/* Absolute positioning for picture inside wrapper */
.gallery .picture {
    position: absolute;
    left: 241px;
    top: 55px;
    transform-origin: left top;
    transform: scale(1.0);
}

.gallery .picture img {
    width: 100%; /* Keep image responsive */
    height: auto;
}

#image1 .gallery{
    position: absolute; 
    left: 20px; 
    top: 10px; 
    display: flex; 
    transform-origin: left top;
}
#image2 .gallery{
    position: absolute; 
    left: 0px; 
    top: -21px; 
    perspective: 1236px;
    perspective-origin: 38% 50%;
    height: 100%;
    width: 100%;
}
#image2 .gallery .picture {
    position: absolute;
    left: 190px;
    top: 94px;
    transform-origin: left top;
    transform: scale3d(0.9, 0.9, 0.9) rotateX(1deg) rotateY(30deg) rotateZ(0deg) translate3d(1px, 0px, 0px) skew(0deg, 0deg);
}
#image3 .gallery .picture {
    position: absolute;
    left: 190px;
    top: 35px;
    transform-origin: left top;
    transform: scale(0.98);
}
/* Mobile responsiveness: stack the divs */
@media (max-width: 768px) {
    #addToCart {
        width: 100%;
        margin: 0;
    }
    #galleryWrapper{
        width: 100%;
        margin: 0;
    }
}