Add images inside of Location hover effect

src/components/molecules/Location.svelte

@@ -50,7 +50,7 @@
 </script>
 
 <div class="location" role="listitem" bind:this={locationEl}
-    style="--offset-x: {$offset.x}px; --offset-y: {$offset.y}px; --rotate: {$offset.x * 0.15}deg"
+    style="--offset-x: {$offset.x}px; --offset-y: {$offset.y}px; --rotate: {$offset.x * 0.125}deg"
 >
     <a href="/{country.slug}/{slug}"
         on:mousemove={handleMouseMove}
@@ -73,6 +73,11 @@
         </div>
     </a>
     <div class="location__photos">
-        <span>{photoIndex}</span>
+        {#each location.photos as photo, index}
+            <Image
+                class={index === photoIndex ? 'is-visible' : null}
+                id={photo.image.id} alt={photo.image.title} width={240} height={160} quality={70}
+            />
+        {/each}
     </div>
 </div>

src/routes/__layout.svelte

@@ -36,6 +36,12 @@
                         }
                     }
                     date_updated
+                    photos (sort: "-date_created", limit: 4) {
+                        image {
+                            id
+                            title
+                        }
+                    }
                 }
 
                 country {

src/style/molecules/_location.scss

@@ -120,6 +120,21 @@
         @include bp (sm) {
             display: block;
         }
+
+        picture {
+            display: none;
+
+            img {
+                display: block;
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+
+            &.is-visible {
+                display: block;
+            }
+        }
     }
 
     &:hover {