< div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 font-mono bg-gray-200 dark:bg-gray-800" > < div class="relative group cursor-pointer" onclick="this.querySelector('.lightbox').classList.remove('hidden')" > < img src="https://picsum.photos/seed/retro1/500/300" alt="Retro Image 1" class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-yellow-600 dark:border-yellow-400" > < div class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50" onclick="event.stopPropagation(); this.classList.add('hidden')" > < img src="https://picsum.photos/seed/retro1/800/600" alt="Retro Image 1 Enlarged" class="max-w-full max-h-full border-4 border-yellow-600 dark:border-yellow-400" > < /div > < div class="relative group cursor-pointer" onclick="this.querySelector('.lightbox').classList.remove('hidden')" > < img src="https://picsum.photos/seed/retro2/500/300" alt="Retro Image 2" class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-orange-600 dark:border-orange-400" > < div class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50" onclick="event.stopPropagation(); this.classList.add('hidden')" > < img src="https://picsum.photos/seed/retro2/800/600" alt="Retro Image 2 Enlarged" class="max-w-full max-h-full border-4 border-orange-600 dark:border-orange-400" > < /div > < div class="relative group cursor-pointer" onclick="this.querySelector('.lightbox').classList.remove('hidden')" > < img src="https://picsum.photos/seed/retro3/500/300" alt="Retro Image 3" class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-red-600 dark:border-red-400" > < div class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50" onclick="event.stopPropagation(); this.classList.add('hidden')" > < img src="https://picsum.photos/seed/retro3/800/600" alt="Retro Image 3 Enlarged" class="max-w-full max-h-full border-4 border-red-600 dark:border-red-400" > < /div > < /div >