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

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../style/pages/photos";
+</style>
+
 <script lang="ts">
     import { page } from '$app/stores'
     import { goto } from '$app/navigation'
@@ -290,14 +294,14 @@
 
         // Reveal text
         timeline.add({
-            targets: '.photos__intro .discover',
+            targets: '.photos-page__intro .discover',
             translateY: [16, 0],
             opacity: [0, 1],
         }, 900)
 
         // Filters
         timeline.add({
-            targets: '.photos__intro .filter',
+            targets: '.photos-page__intro .filter',
             translateY: [16, 0],
             opacity: [0, 1],
             complete ({ animatables }) {
@@ -332,8 +336,8 @@
 />
 
 
-<PageTransition name="photos">
-    <section class="photos__intro"
+<PageTransition name="photos-page">
+    <section class="photos-page__intro"
         class:is-passed={scrolledPastIntro}
     >
         <ScrollingTitle tag="h1" text="Houses">
@@ -342,14 +346,14 @@
 
         <DiscoverText />
 
-        <div class="filter"
+        <div class="filters"
             class:is-over={filtersOver}
             class:is-transitioning={filtersTransitioning}
             class:is-visible={filtersVisible}
         >
-            <span class="text-label filter__label">Filter photos</span>
+            <span class="text-label filters__label">Filter photos</span>
 
-            <div class="filter__bar">
+            <div class="filters__bar">
                 <ul>
                     <li>
                         <Select
@@ -410,7 +414,7 @@
                 </ul>
             </div>
 
-            <div class="filter__actions">
+            <div class="filters__actions">
                 {#if filtered}
                     <button class="reset button-link"
                         on:click={resetFiltered}
@@ -423,10 +427,10 @@
         </div>
     </section>
 
-    <section class="photos__content" style="--margin-sides: {sideMargins}px;" bind:this={photosContentEl}>
+    <section class="photos-page__content" style="--margin-sides: {sideMargins}px;" bind:this={photosContentEl}>
         <div class="grid container">
             {#if photos}
-                <div class="photos__grid" bind:this={photosGridEl}>
+                <div class="photos-page__grid" bind:this={photosGridEl}>
                     {#each photos as { id, image, slug, location, title, city }, index (id)}
                         <figure class="photo shadow-photo">
                             <a href="/{location.country.slug}/{location.slug}/{slug}" sveltekit:prefetch sveltekit:noscroll tabindex="0">
@@ -476,7 +480,7 @@
                     </div>
                 </div>
             {:else if !filteredCountryExists}
-                <div class="photos__message">
+                <div class="photos-page__message">
                     <p>
                         <strong>{$page.url.searchParams.get('country').replace(/(^|\s)\S/g, letter => letter.toUpperCase())}</strong> is not available… yet 👀
                     </p>