Isolate Homepage collage component and add hover effect on other photos

src/routes/index.svelte

@@ -15,8 +15,8 @@
     import ScrollingTitle from '$components/atoms/ScrollingTitle.svelte'
     import BoxCTA from '$components/atoms/BoxCTA.svelte'
     import DiscoverText from '$components/atoms/DiscoverText.svelte'
-    import PhotoCard from '$components/molecules/PhotoCard.svelte'
     import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
+    import Collage from '$components/organisms/Collage.svelte'
     import Locations from '$components/organisms/Locations.svelte'
     import Shop from '$components/organisms/Shop.svelte'
     import Newsletter from '$components/organisms/Newsletter.svelte'
@@ -45,7 +45,7 @@
 
         // Animate collage photos
         timeline.add({
-            targets: '.homepage__collage .photo-card',
+            targets: '.collage .photo-card',
             translateY: ['33.33%', 0],
             rotate (item: HTMLElement) {
                 return [-4, getComputedStyle(item).getPropertyValue('--rotation')]
@@ -98,18 +98,7 @@
     </section>
 
     <section class="homepage__photos">
-        <div class="homepage__collage">
-            {#each photos as { slug, title, image, location, city }}
-                <PhotoCard
-                    id={image.id}
-                    alt={title}
-                    url="/{location.country.slug}/{location.slug}/{slug}"
-                    title={title}
-                    location={location}
-                    city={city}
-                />
-            {/each}
-        </div>
+        <Collage {photos} />
     </section>
 
     <div class="homepage__ctas" id="ctas">