Isolate Homepage collage component and add hover effect on other photos

src/components/organisms/Collage.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import PhotoCard from '$components/molecules/PhotoCard.svelte'
+
+    export let photos: any[] = []
+
+    let hovered: number = null
+</script>
+
+{#if photos}
+    <div class="collage">
+        {#each photos as { slug, title, image, location, city }, index}
+            <PhotoCard
+                id={image.id}
+                alt={title}
+                url="/{location.country.slug}/{location.slug}/{slug}"
+                title={title}
+                location={location}
+                city={city}
+                hovered={hovered !== null && hovered !== index}
+                on:hover={({ detail }) => hovered = detail ? index : null}
+            />
+        {/each}
+    </div>
+{/if}