Force 3/2 format for non landscape photos on Location page

Center image on a background when square, portrait or other ratio
- Fix MutuationObserver for using components (would think a component is an item)

src/routes/[country]/[location]/[photo].ts

@@ -54,6 +54,7 @@ export async function get({ params }: RequestEvent): Promise<RequestHandlerOutpu
                         id
                         title
                     }
+                    orientation
                     city
                 }
 

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

@@ -8,6 +8,7 @@
     import { getAssetUrlKey } from '$utils/helpers'
     import { fetchAPI } from '$utils/api'
     import { DURATION } from '$utils/contants'
+    import { photoFields } from '.'
     // Components
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
@@ -75,15 +76,7 @@
                     limit: ${import.meta.env.VITE_LIST_INCREMENT},
                     page: ${page},
                 ) {
-                    title
-                    slug
-                    city
-                    image {
-                        id
-                        title
-                    }
-                    date_taken
-                    date_created
+                    ${photoFields}
                 }
             }
         `)
@@ -126,7 +119,9 @@
             for (const mutation of mutationsList) {
                 if (mutation.type === 'childList') {
                     // Observe new items
-                    mutation.addedNodes.forEach((item: HTMLElement) => observerPhotos.observe(item))
+                    Array.from(mutation.addedNodes)
+                        .filter(item => item.nodeType === Node.ELEMENT_NODE)
+                        .forEach((item: HTMLElement) => observerPhotos.observe(item))
                 }
             }
         })
@@ -269,11 +264,12 @@
 
     {#if photos.length}
         <section class="location-page__houses grid" bind:this={photosListEl}>
-            {#each photos as { title, image: { id, title: alt }, slug, city, date_taken }, index}
+            {#each photos as { title, image: { id, title: alt }, orientation, slug, city, date_taken }, index}
                 <House
                     {title}
                     photoId={id}
                     photoAlt={alt}
+                    {orientation}
                     url="/{params.country}/{params.location}/{slug}"
                     {city}
                     date={date_taken}

src/routes/[country]/[location]/index.ts

@@ -1,6 +1,19 @@
 import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
 import { fetchAPI } from '$utils/api'
 
+export const photoFields = `
+    title
+    slug
+    city
+    image {
+        id
+        title
+    }
+    orientation
+    date_taken
+    date_created
+`
+
 export async function get({ params }: RequestEvent): Promise<RequestHandlerOutput> {
     try {
         const { location } = params
@@ -40,15 +53,7 @@ export async function get({ params }: RequestEvent): Promise<RequestHandlerOutpu
                     limit: ${import.meta.env.VITE_LIST_AMOUNT},
                     page: 1,
                 ) {
-                    title
-                    slug
-                    city
-                    image {
-                        id
-                        title
-                    }
-                    date_taken
-                    date_created
+                    ${photoFields}
                 }
 
                 # Total