.gallery-preview {
 max-width: 700px;
 margin: 0px auto;
}
.large-image-container {
 position: relative;
}
.large-image-container img {
 width: 100%;
 border-radius: 8px;
}
.overlay {
 z-index: 1; /* keep text above the image */
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 background: rgba(0,0,0,0.6);
 color: #fff;
 padding: 10px;
 border-radius: 0 0 8px 8px;
}
.thumbnails {
 display: flex;
 flex-wrap: wrap;
 margin-top: 10px;
 gap: 10px;
 justify-content: center;
 position: relative;
 z-index: 2; /* ensure thumbnails are always on top */
}
.thumbnails img {
 width: 100px;
 height: 70px;
 object-fit: cover;
 cursor: pointer;
 border: 2px solid transparent;
 border-radius: 4px;
 transition: border 0.3s;
}
.thumbnails img:hover {
 border: 2px solid #0072bc;
}
@media only screen and (max-width: 500px) {
  .overlay {
    position: static;       /* place below image instead of over it */
    background: #333;       /* solid background for readability */
    border-radius: 0 0 8px 8px;
    visibility: visible;    /* make sure it shows */
    display: block;         /* don’t hide it */
  }
}