/* Modal Title */
.modal-title-gallery {
    font-size: 1.5rem;
    margin-top: 15px;
    color: #333;
    text-align: center;
}

/* Date below the title */
.modal-date {
    font-size: 0.9rem;
    color: #888;          /* grey color */
    font-weight: 300;     /* thin font */
    text-align: center;
    margin-bottom: 10px;
}

.modal-gallery {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.modal-gallery img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}


/* Close Button over image */
.modal-gallery .modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
    color: #fff;
    background: rgba(0,0,0,0.5);  /* semi-transparent circle */
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Remove padding on top, left, right; keep padding at bottom */
#displayImageBox {
    padding: 0 0 10px 0; /* top:0, right:0, bottom:2rem, left:0 */
}

/* White close (X) button for modal-gallery */
#displayImageBox .modal-close {
    color: #fff;       /* white color */
    font-size: 1.5rem; /* optional: make it slightly bigger */
    z-index: 10;       /* ensure it's above the image */
    background: transparent;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}