🔥 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/organisms/Carousel.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/organisms/carousel";
+</style>
+
 <script lang="ts">
     import { onMount } from 'svelte'
     import { writable } from 'svelte/store'

src/components/organisms/Cart.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/organisms/cart";
+</style>
+
 <script lang="ts">
     import { onMount } from 'svelte'
     import { fade, fly } from 'svelte/transition'

src/components/organisms/Collage.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/organisms/collage";
+</style>
+
 <script lang="ts">
     import PhotoCard from '$components/molecules/PhotoCard.svelte'
 

src/components/organisms/Footer.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/organisms/footer";
+</style>
+
 <script lang="ts">
     import { getContext } from 'svelte'
     // Components

src/components/organisms/InteractiveGlobe.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/modules/globe";
+</style>
+
 <script lang="ts">
     import { onMount, onDestroy, getContext } from 'svelte'
     import { getPosition, getRandomItem } from '$utils/functions'
@@ -123,7 +127,7 @@
 
 <section id="globe">
     {#if type === 'cropped'}
-        <div class="globe--cropped">
+        <div class="globe-cropped">
             <div class="globe" bind:this={globeEl} />
         </div>
     {:else}

src/components/organisms/ListCTAs.svelte

@@ -0,0 +1,20 @@
+<style lang="scss">
+    .list-cta {
+        @include bp (sm) {
+            display: flex;
+            justify-content: center;
+        }
+
+        & > :global(*) {
+            margin: 20px auto 0;
+
+            @include bp (sm) {
+                margin: 0 16px;
+            }
+        }
+    }
+</style>
+
+<ul class="list-cta">
+    <slot />
+</ul>

src/components/organisms/Locations.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/organisms/locations";
+</style>
+
 <script lang="ts">
     import { getContext } from 'svelte'
     import { flip } from 'svelte/animate'

src/components/organisms/NewsletterModule.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/organisms/newsletter";
+</style>
+
 <script lang="ts">
     import { getContext } from 'svelte'
     // Components

src/components/organisms/PostersGrid.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/pages/shop/posters";
+</style>
+
 <script lang="ts">
     import { getContext, onMount } from 'svelte'
     import EmblaCarousel, { type EmblaCarouselType } from 'embla-carousel'

src/components/organisms/ShopHeader.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/pages/shop/intro";
+</style>
+
 <script lang="ts">
     import { getContext, onMount } from 'svelte'
     import anime, { type AnimeTimelineInstance } from 'animejs'

src/components/organisms/ShopModule.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/organisms/shop";
+</style>
+
 <script lang="ts">
     import { getContext, onMount } from 'svelte'
     // Components