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>