[Feature] Implement responsive photo gallery with lazy loading

[diegodev-01]

We need to create a photo gallery component to showcase event highlights. It must be visually appealing and highly performant.

Core Requirements:

• Responsive Grid: Use CSS Grid or Flexbox to ensure images adapt fluidly from mobile (1 column) to desktop (multi-column) layouts.
• Image Optimization: Use Astro’s component (or astro:assets) to automatically optimize image sizes, formats (WebP/AVIF), and handle quality.
• Lightbox/Modal: Clicking an image should open a full-screen viewer (Lightbox) to inspect the image in detail.

Performance & Optimization:

• Lazy Loading: All images must use loading="lazy" by default.
• Island Architecture: Similar to the game and map, this gallery should only load the interaction logic (like the lightbox viewer) when the user interacts with the gallery or scrolls into its section.
• Cumulative Layout Shift (CLS): Ensure image containers have defined aspect ratios (via CSS aspect-ratio property) to prevent layout jumping while images are loading.

[zzebnell]

Yo tomo este issue 🙏