✨ Define small PostCard from photo index

src/routes/photos.svelte

@@ -75,6 +75,25 @@
     }
 
 
+    /**
+     * Define small photo size from index
+     * With different grid patterns depending on window width
+     */
+    $: isSmall = (index: number) => {
+        let modulo = index % 5
+        let notOn = [0]
+
+        // Change pattern on small desktop
+        if (innerWidth >= 768 && innerWidth < 1200) {
+            modulo = index % 11
+            notOn = [0, 7, 10]
+        } else if (innerWidth >= 1200) {
+            // Disable on larger desktop
+            return false
+        }
+        return !notOn.includes(modulo)
+    }
+
 
     /**
      * Select change events
@@ -262,8 +281,8 @@
         <div class="grid container">
             {#if photos.length}
                 <div class="photos__grid">
-                    {#each photos as { image, slug, location, title }}
-                        <div class="photo shadow-photo">
+                    {#each photos as { image, slug, location, title }, index}
+                        <figure class="photo shadow-photo">
                             <a href="/{location.country.slug}/{location.slug}/{slug}">
                                 <Image
                                     id={image.id}
@@ -276,15 +295,18 @@
                                     ratio={1.5}
                                     alt={image.title}
                                 />
+                            </a>
+                            <figcaption>
                                 <PostCard
                                     street={title}
                                     location={location.name}
                                     region={location.region}
                                     country={location.country.name}
                                     flagId={location.country.flag.id}
+                                    size={isSmall(index) ? 'small' : null}
                                 />
-                            </a>
-                        </div>
+                            </figcaption>
+                        </figure>
                     {/each}
                 </div>