.image-map-container {
    position: relative;
    /*max-width: 600px; !* Adjust as needed *!*/
    width: 100%;
}
.image-flex {
    display: flex;
    justify-content: center;
}
.main-image {
    width: 100%;
    /*display: block;*/
    padding: 50px;
}

.hotspot {
    position: absolute;
    cursor: pointer;
}

/* Define each hotspot's position as a % of the image */
#window1 { top: 58%; left: 55%; width: 4%; height: 8%; }
#window2 { top: 70%; left: 56%; width: 4%; height: 7%; }
#window3 { top: 51%; left: 52%; width: 3%; height: 4%; }
#window4 { top: 50%; left: 49%; width: 2%; height: 4%; }

/* Optional: make hotspots visible for testing */
.hotspot:hover {
    outline: 2px dashed green;
}

/* Preview images */
.preview {
    display: none;
    position: absolute;
    top: 50%;
    left: 70%;
    z-index: 2;
}

.preview img {
    max-width: 200px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* Show preview on hover */
#window1:hover ~ #preview1,
#window2:hover ~ #preview2,
#window3:hover ~ #preview3,
#window4:hover ~ #preview4 {
    display: block;
}