.gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            padding: 20px;
        }
        .gallery-image {
            width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.2s;
        }
        .gallery-image:hover {
            transform: scale(1.05);
        }


        /* Normal state for the image */
#fullscreen-image {
    width: 400px;
    height: auto;
    cursor: pointer; /* Changes cursor to a hand icon */
    transition: all 0.5s; /* Smooth transition for size changes */
}

/* Styles applied when the image is in actual fullscreen mode using the API */
#fullscreen-image:fullscreen {
    width: 100vw; /* Viewport width */
    height: 100vh; /* Viewport height */
    object-fit: contain; /* Ensures the image fits within the screen without cropping */
    background-color: black; /* Fills the background behind the image */
    margin: auto; /* Centers the image */
}

/* Vendor prefixes for cross-browser compatibility (optional but recommended) */
#fullscreen-image:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    background-color: black;
    margin: auto;
}