chore: better gallery layout and astro image tags

src/pages/index.astro

@@ -2,10 +2,11 @@
 import { getCollection } from 'astro:content'
 import PageLayout from '../layouts/PageLayout.astro'
 import { Content as WhatPhcContent, frontmatter as whatsPhcFrontmatter } from '../content/meta/whats-phc.md'
+import { Image } from 'astro:assets'
 
 const news = await getCollection('news')
 
-const galleryCollage = (await Astro.glob('@/assets/gallery/*.jpg')).map(({ default: { src } }) => src)
+const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg')
 ---
 
 <PageLayout pageTags="homepage">
@@ -117,19 +118,19 @@ const galleryCollage = (await Astro.glob('@/assets/gallery/*.jpg')).map(({ defau
                 </div>
             </a>
             <!-- <a href="#" style="--masonry-height: 2;">
-            <div class="project">
-                <div class="image">
-                    <div class="box"></div>
+                <div class="project">
+                    <div class="image">
+                        <div class="box"></div>
+                    </div>
+                    <div class="title">PHC-Bot</div>
+                    <div class="description">
+                        Un bot con cui chattare per chiedere informazioni o supporto tecnico.
+                    </div>
                 </div>
-                <div class="title">PHC-Bot</div>
-                <div class="description">
-                    Un bot con cui chattare per chiedere informazioni o supporto tecnico.
-                </div>
-            </div>
-        </a> -->
+            </a> -->
             <a target="_blank" href="https://lab.phc.dm.unipi.it/orario/" style="--masonry-height: 1;">
                 <div class="project" style="--card-bg: #75ca75;">
-                    <div class="image auto">
+                    <div class="image">
                         <img src="https://lab.phc.dm.unipi.it/orario/icon.png" alt="Logo Orario" />
                     </div>
                     <div class="title">Orario</div>
@@ -234,11 +235,24 @@ const galleryCollage = (await Astro.glob('@/assets/gallery/*.jpg')).map(({ defau
         </div>
         <div class="gallery-collage">
             {
-                galleryCollage.map((src, i) => (
-                    <div class="card">
-                        <img src={src} alt={`gallery image ${i}`} />
-                    </div>
-                ))
+                galleryCollage.map((module, i) => {
+                    const src = module.default.src
+                    const filename = src.split('/').at(-1).split('?').at(0).split('.').at(0)
+
+                    const [rows, cols] = filename.includes('@')
+                        ? filename
+                              .split('@')
+                              .at(-1)
+                              .split('x')
+                              .map(s => parseInt(s))
+                        : [1, 1]
+
+                    return (
+                        <div class="card" style={`--rows: ${rows}; --cols: ${cols};`}>
+                            <Image src={module.default} alt={`gallery image ${i}`} />
+                        </div>
+                    )
+                })
             }
         </div>
         <div class="card large" style="--card-base: #ddd;">