Add hover effect on Homepage collage PhotoCard

src/routes/index.svelte

@@ -40,11 +40,13 @@
 
     <section class="homepage__photos">
         <div class="homepage__collage">
-            {#each photos as { slug, location: { slug: locationSlug, country }, image: { id, title } }}
+            {#each photos as { slug, title, image, location }}
                 <PhotoCard
-                    id={id}
+                    id={image.id}
                     alt={title}
-                    url="/{country.slug}/{locationSlug}/{slug}"
+                    url="/{location.country.slug}/{location.slug}/{slug}"
+                    title={title}
+                    location={location}
                 />
             {/each}
         </div>
@@ -101,14 +103,18 @@
             query {
                 photo (limit: 11, sort: ["-date_created"]) {
                     slug
+                    title
+                    city
                     location {
+                        name
                         slug
-                        country { slug }
-                    }
-                    image {
-                        id
-                        title
+                        country {
+                            slug
+                            name
+                            flag { id }
+                        }
                     }
+                    image { id }
                 }
             }
         `)