Failed lightbox

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Title</title>
        <style>
            * {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }

            body {
                background: #ffffff;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100vh;
                color: #333;
            }

            .gallery {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 15px;
                max-width: 800px;
            }

            img {
                width: 100%;
                height: auto;
            }

            .galleryItem {
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            #lightBox {
                display: none;
                align-items: center;
                justify-content: center;
                height: 100vh;
                position: fixed;
                left: 0;
                top: 0;
                background: rgba(0, 0, 0, 0.5);
                width: 100%;
                flex-direction: column;

                img {
                    width: 90%;
                    max-width: 500px;
                    height: 70%;
                    max-height: 500px;
                    object-fit: cover;
                }

                #close {
                    position: absolute;
                    right: 30px;
                    color: #ffffff;
                    font-size: 50px;
                }

                #caption {
                    color: #000000;
                    margin-top: 20px;
                    font-size: 10px;
                    text-align: center;
                }
            }
        </style>
    </head>
    <body>
        <!-- Galeria -->
        <div class="gallery">
            <div class="galleryItem">
                <img src="https://media.tenor.com/_zWYqfZdneIAAAAM/shocked-face-shocked-meme.gif" alt="Imagem 1" />
            </div>

            <div class="galleryItem">
                <img src="https://www.bu.edu/files/2024/12/Screenshot-2024-12-13-at-12.42.40%E2%80%AFPM.png" alt="Imagem 2" />
            </div>

            <div class="galleryItem">
                <img src="https://ichef.bbci.co.uk/images/ic/480xn/p0kbsfp5.jpg" alt="Imagem 3" />
            </div>
        </div>
        <!-- Lightbox -->
        <div id="lightBox">
            <span id="close">&times;</span>
            <img src="https://ichef.bbci.co.uk/images/ic/480xn/p0kbsfp5.jpg" alt="" class="lightBoxCon" />
            <div id="caption">Image</div>
        </div>

        <script>
            const galleryItems = document.querySelectorAll(".galleryItem img");
            const lightbox = document.getElementById("lightBox");
            const lightboxImg = document.getElementById("lightBoxCon");
            const caption = document.getElementById("caption");
            const close = document.getElementById("close");

            galleryItems.forEach((item) => {
                item.addEventListener("click", () => {
                    lightbox.style.display = "flex";
                    lightboxImg.src = item.src;
                    caption.innerText = item.alt;
                });

                close.addEventListener("click", (e) => {
                    lightbox.style.display = "none";
                });

                lightbox.addEventListener("click", (e) => {
                    if (e.target !== lightboxImg && e.target !== caption) {
                        lightbox.style.display = "none";
                    }
                });
            });
        </script>
    </body>
</html>