<-<style> .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .gallery img { width: 100%; border-radius: 6px; cursor: pointer; transition: transform .3s; } .gallery img:hover { transform: scale(1.05); } #lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; z-index: 9999; } #lightbox img { max-width: 90%; max-height: 90%; } </style> <div class="gallery"> <BlogPosts> <img src="<PostImage>" onclick="openLightbox(this.src)"> </BlogPosts> </div> <div id="lightbox" onclick="this.style.display='none'"> <img id="lightbox-img"> </div> <script> function openLightbox(src){ document.getElementById('lightbox-img').src = src; document.getElementById('lightbox').style.display = 'flex'; } </script>->