Place: Add photo Transition In, Add Illustration system, Visual fixes

- Add a transition in on each photo component (scale down + fade in), TODO: Parallax on number
- Illustration takes two images and changes the source depending on the viewport size

src/routes/location/[country]/[place].svelte

@@ -4,8 +4,25 @@
     // Preload data
     export async function preload (page, session) {
         // Load photos
-        const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,slug,date,image.*,location.*,location.country.*,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%&limit=-1&sort=-created_on,name`)
+        // const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,slug,date,image.*,location.*,location.country.*,created_on,modified_on&filter[location.slug][rlike]=%${page.params.place}%&limit=-1&sort=-created_on,name`)
+        const req = await this.fetch(apiEndpoints.gql, {
+            method: 'post',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ query: `{
+                photos (filter: { slug_has: "${page.params.place}" }, limit: -1) {
+                    data {
+                        id
+                        name
+                        slug
+                        date
+                        created_on
+                        modified_on
+                    }
+                }
+            }`})
+        })
         const photos = await req.json()
+        console.log(photos)
         if (req.ok) {
             return { photos: photos.data }
         }
@@ -50,7 +67,7 @@
     let layoutSetting
 
     // Update current location
-    const location = $locations.find(loc => loc.slug === $page.params.location)
+    const location = $locations.find(loc => loc.slug === $page.params.place)
     currentLocation.set(location)
     currentPhotos.set(photos)
 
@@ -149,11 +166,9 @@
         </div>
     </div>
 
-    <div class="place__illustration">
-        <div class="place__illustration--left side"></div>
-        <div class="place__illustration--center"></div>
-        <div class="place__illustration--right side"></div>
-    </div>
+    <div class="place__illustration"
+        style="--url-desktop: url({location.illustration_desktop.full_url}); --url-mobile: url({location.illustration_mobile.full_url});"
+    />
 </section>
 
 <section class="photos photos--{layoutSetting || 'list'}">