🔥 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/routes/index.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../style/pages/homepage";
+</style>
+
 <script lang="ts">
     import { page } from '$app/stores'
     import { getContext, onMount } from 'svelte'
@@ -17,6 +21,7 @@
     import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
     import Collage from '$components/organisms/Collage.svelte'
     import Locations from '$components/organisms/Locations.svelte'
+    import ListCTAs from '$components/organisms/ListCTAs.svelte'
     import ShopModule from '$components/organisms/ShopModule.svelte'
     import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
 
@@ -77,7 +82,7 @@
     >
         <ScrollingTitle
             tag="h1"
-            class="homepage__title--houses"
+            class="title-houses"
             label="Houses of the World"
             offsetStart={-300}
             offsetEnd={400}
@@ -103,32 +108,38 @@
     <div class="homepage__ctas" id="ctas">
         <DiscoverText />
 
-        <div class="list-cta">
-            <BoxCTA
-                url="{$page.url.pathname}#locations"
-                icon="globe"
-                label="Discover locations"
-                alt="Globe"
-            />
-            <BoxCTA
-                url="/photos"
-                icon="photos"
-                label="Browse all photos"
-                alt="Photos"
-            />
-            <BoxCTA
-                url="/shop"
-                icon="bag"
-                label="Shop our products"
-                alt="Shopping bag"
-            />
-        </div>
+        <ListCTAs>
+            <li>
+                <BoxCTA
+                    url="{$page.url.pathname}#locations"
+                    icon="globe"
+                    label="Discover locations"
+                    alt="Globe"
+                />
+            </li>
+            <li>
+                <BoxCTA
+                    url="/photos"
+                    icon="photos"
+                    label="Browse all photos"
+                    alt="Photos"
+                />
+            </li>
+            <li>
+                <BoxCTA
+                    url="/shop"
+                    icon="bag"
+                    label="Shop our products"
+                    alt="Shopping bag"
+                />
+            </li>
+        </ListCTAs>
     </div>
 
     <section class="homepage__locations">
         <InteractiveGlobe />
 
-        <ScrollingTitle tag="p" class="homepage__title--world mask">
+        <ScrollingTitle tag="p" class="title-world mask">
             <SplitText text="World" mode="chars" />
         </ScrollingTitle>