From 22b306744689b431ad4d4d6df9e9c87f34c8db11 Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Mon, 9 Mar 2026 15:53:15 +0100
Subject: [PATCH] Galerie masonry CSS sans rognage des photos portrait

---
 src/pages/spectacles/[id].astro | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/spectacles/[id].astro b/src/pages/spectacles/[id].astro
index da1a6bd..59eec1d 100644
--- a/src/pages/spectacles/[id].astro
+++ b/src/pages/spectacles/[id].astro
@@ -122,13 +122,13 @@ if (!spectacle) {
       {spectacle.gallery.length > 0 && (
         <section class="fade-up mb-16 md:mb-24">
           <h2 class="font-display text-3xl md:text-5xl text-night mb-8 md:mb-12 text-center">Galerie</h2>
-          <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 md:gap-8">
+          <div class="columns-1 sm:columns-2 gap-6 md:gap-8">
             {spectacle.gallery.map((img, index) => (
-              <div class="aspect-[4/3] overflow-hidden rounded-[24px] md:rounded-[40px] shadow-xl shadow-night/5 border-4 border-white">
+              <div class="mb-6 md:mb-8 break-inside-avoid overflow-hidden rounded-2xl md:rounded-3xl shadow-xl shadow-night/5 border-4 border-white">
                 <img
                   src={img}
                   alt={`${spectacle.title} - photo ${index + 1}`}
-                  class="object-cover w-full h-full"
+                  class="w-full h-auto"
                   referrerpolicy="no-referrer"
                 />
               </div>