/* #gallery_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px,1fr));
    gap: 10px;
    overflow: hidden;
} */

#gallery_grid {
    columns: 500px;
    column-gap: 1rem;
}

@media (max-width: 1100px) {
    #gallery_grid {
        columns: 400px;
        column-gap: 1rem;
    }
}

@media (max-width: 900px) {
    #gallery_grid {
        columns: 300px;
        column-gap: 1rem;
    }
}

@media (max-width: 630px) {
    #gallery_grid {
        columns: 200px;
        column-gap: 1rem;
    }
}

.template_gallery_img_container {
    width: 100%;          /* fill column width */
    display: block;       /* remove bottom whitespace gap */
    margin-bottom: 1rem;  /* space between images vertically */
    /* position: relative; /* Ensure positioning works for child elements */
}

.template_gallery_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* transition: opacity 0.3s ease-in-out; */
}


/* ----- OPTIONAL TEXT WHEN HOVER EFFECT ----- */
/* Reduce opacity when hovering over the container */
/* .template_gallery_img_container:hover .template_gallery_img {
    opacity: 30%;
} */

/* .template_gallery_img_text { */
    /* position: absolute; /* Absolute positioning relative to the container */
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -75%); /* Center the text */
    /* display: none; /* Hide by default */
    /* color: white; /* Adjust as needed */
    /* font-size: 1.5em; */
    /* padding: 10px; */
    /* border-radius: 5px; */
/* } */

/* Show the text when hovering over the container */
/* .template_gallery_img_container:hover .template_gallery_img_text {
    display: block;
} */