🔥 Huge style refactoring by using SvelteKit built-in style tag

It's been tricky but got there finally! Hello `:global`
- Avoid using one global CSS file containing everything
- Import the component SCSS file in a script tag from the component file to allow style scoping and including it only when used

src/components/molecules/Location.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/location";
+</style>
+
 <script lang="ts">
     import { getContext } from 'svelte'
     import { spring } from 'svelte/motion'
@@ -66,7 +70,7 @@
         tabindex="0"
     >
         <Image
-            class="location__flag"
+            class="flag"
             id={location.country.flag.id}
             sizeKey="square-small"
             width={32} height={32}
@@ -92,7 +96,7 @@
             {#each location.photos as { image }, index}
                 {#if image}
                     <Image
-                        class={index === photoIndex ? 'is-visible' : null}
+                        class={`location__photo ${index === photoIndex ? 'is-visible' : ''}`}
                         id={image.id}
                         sizeKey="photo-thumbnail"
                         width={340} height={226}