styled feed image gallery

src/routes/feed/+page.svelte

@@ -52,9 +52,11 @@
         <p class="subtitle">{entry.date}</p>
         <svelte:component this={entry.content} />
         {#if entry.images && entry.images.length > 0}
+            <div class="image-gallery">
                 {#each entry.images as i, index}
-                <img src="{entry.path}/{i}" alt={entry.imageAlts[index]}>
+                    <img loading="lazy" src="{entry.path}/{i}" alt={entry.imageAlts[index]}>
                 {/each}
+            </div>
         {/if}
     {/each}
 
@@ -106,6 +108,27 @@
         background-color: var(--color-background-highlight-alt);
     }
 
+    .image-gallery {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 4px;
+    }
+
+    .image-gallery img {
+        width: 100%;
+        height: 100%;
+        display: block;
+        object-fit: cover;
+        filter: brightness(60%) saturate(80%);
+        transition: filter var(--duration-animation) var(--anim-curve),
+                    border-radius var(--duration-animation) var(--anim-curve);
+    }
+
+    .image-gallery img:hover {
+        border-radius: var(--border-radius);
+        filter: brightness(100%) saturate(100%);
+    }
+
     .subtitle {
         font-family: var(--font-mono);
         margin: 0;
@@ -123,4 +146,14 @@
     .subtitle::after {
         content: " -->";
     }
+
+    @media screen and (max-width: 800px) {
+        .image-gallery img {
+            filter: brightness(100%) saturate(100%);
+        }
+
+        .image-gallery img:hover {
+            border-radius: 0;
+        }
+    }
 </style>