tailwind

src/components/PhotoGallery.astro

@@ -7,81 +7,16 @@ const { images } = Astro.props;
 ---
 
 {images && images.length > 0 ? (
-  <div class="photo-gallery">
+  <div class="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] md:grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-[--spacing-md] md:gap-[--spacing-sm] mt-[--spacing-lg]">
     {images.map((image) => (
-      <div class="gallery-item">
-        <img src={image} alt="Theater photo" loading="lazy" />
+      <div class="relative overflow-hidden rounded-lg shadow-[0_4px_10px_rgba(0,0,0,0.2)] transition-all duration-300 aspect-[4/3] hover:-translate-y-1 hover:shadow-[0_8px_20px_rgba(0,0,0,0.3)] group">
+        <img src={image} alt="Theater photo" loading="lazy" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" />
       </div>
     ))}
   </div>
 ) : (
-  <div class="placeholder">
-    <p class="placeholder-de" data-lang="de">Fotos werden bald hinzugefügt. Besuchen Sie uns später wieder!</p>
-    <p class="placeholder-en" data-lang="en">Photos will be added soon. Check back later!</p>
+  <div class="text-center p-[--spacing-xl] bg-white/10 rounded-lg italic">
+    <p class="placeholder-de m-0 text-lg" data-lang="de">Fotos werden bald hinzugefügt. Besuchen Sie uns später wieder!</p>
+    <p class="placeholder-en m-0 text-lg" data-lang="en">Photos will be added soon. Check back later!</p>
   </div>
 )}
-
-<style>
-  .photo-gallery {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: var(--spacing-md);
-    margin-top: var(--spacing-lg);
-  }
-
-  .gallery-item {
-    position: relative;
-    overflow: hidden;
-    border-radius: 8px;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    aspect-ratio: 4 / 3;
-  }
-
-  .gallery-item:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
-  }
-
-  .gallery-item img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: transform 0.3s ease;
-  }
-
-  .gallery-item:hover img {
-    transform: scale(1.05);
-  }
-
-  .placeholder {
-    text-align: center;
-    padding: var(--spacing-xl);
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 8px;
-    font-style: italic;
-  }
-
-  .placeholder p {
-    margin: 0;
-    font-size: 1.1rem;
-  }
-
-  /* Language-specific placeholders */
-  :global([data-language="de"]) .placeholder-en,
-  :global([data-language="en"]) .placeholder-de {
-    display: none;
-  }
-
-  :global([data-language="de"]) .placeholder-de,
-  :global([data-language="en"]) .placeholder-en {
-    display: block;
-  }
-
-  @media (max-width: 768px) {
-    .photo-gallery {
-      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-      gap: var(--spacing-sm);
-    }
-  }
-</style>