/* Full layout area inside modal */

.container {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 10px;
    background: black;
    color: white;
    box-sizing: border-box;
}

/* LEFT IMAGE AREA – 65% */

.image-area {
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;  /* Prevent overflow */
}

/* Image stays inside its box */

.image-area img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;  /* VERY important: prevents stretching or overflow */ 
    display: block;
}

/* RIGHT TEXT AREA – 35% */

.text-area {
    width: 30%;
    padding: 5px 5px 5px 5px;
    box-sizing: border-box;
    overflow-y: auto;       /* scrolls the text inside its own region */ 
    display: flex;
    flex-direction: column;
    gap: 10px;
}