🔥 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/style/molecules/_house.scss

@@ -57,7 +57,7 @@
             & > * {
                 display: inline-block;
             }
-            svg {
+            :global(svg) {
                 width: 1em;
                 height: 1em;
                 margin-right: 0.4em;
@@ -77,7 +77,7 @@
         opacity: 0;
         transition: opacity 2s var(--ease-quart);
 
-        figure {
+        :global(figure) {
             position: relative;
             z-index: 5;
             display: flex;
@@ -98,7 +98,7 @@
                 height: 0;
             }
         }
-        picture {
+        :global(picture) {
             height: 100%;
             border-radius: 0;
 
@@ -112,7 +112,7 @@
                 transform: translateX(-50%);
             }
         }
-        img {
+        :global(img) {
             display: block;
             width: 100%;
             height: 100%;
@@ -132,7 +132,7 @@
         // Scale down image on hover
         @media (hover: hover) {
             a:hover {
-                img {
+                :global(img) {
                     opacity: 0.7;
                     transform: scale3d(1.03, 1.03, 1.03) !important;
                     transition-duration: 1.2s;
@@ -187,24 +187,24 @@
             }
         }
     }
+}
 
-    // Visible state
-    &.is-visible {
-        .house__info {
-            h2 {
-                opacity: 1;
-                transform: translate3d(0,0,0);
-            }
-            .info {
-                opacity: 1;
-            }
-        }
-        .house__photo {
+// Visible state
+:global(.is-visible) {
+    .house__info {
+        h2 {
             opacity: 1;
+            transform: translate3d(0,0,0);
+        }
+        .info {
+            opacity: 1;
+        }
+    }
+    .house__photo {
+        opacity: 1;
 
-            img {
-                transform: scale3d(1.01, 1.01, 1.01);
-            }
+        :global(img) {
+            transform: scale3d(1.01, 1.01, 1.01);
         }
     }
 }