🔥 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/_photo-card.scss

@@ -1,9 +1,4 @@
 .photo-card {
-    picture {
-        width: 100%;
-        height: 100%;
-        background: $color-primary-tertiary20;
-    }
     & > * {
         border-radius: 8px;
     }
@@ -15,7 +10,12 @@
         transition: transform 0.7s var(--ease-quart);
         will-change: transform;
     }
-    img {
+    :global(picture) {
+        width: 100%;
+        height: 100%;
+        background: $color-primary-tertiary20;
+    }
+    :global(img) {
         display: block;
         width: calc(100% + 2px);
         height: calc(100% + 2px);
@@ -41,7 +41,7 @@
             font-size: clamp(#{rem(12px)}, 1.2vw, #{rem(14px)});
         }
 
-        picture {
+        :global(picture) {
             width: 20px;
             height: 20px;
             margin-right: 12px;
@@ -54,18 +54,18 @@
                 margin-right: 16px;
             }
 
-            img {
+            :global(img) {
                 display: block;
                 width: 100%;
                 height: 100%;
             }
         }
-        p {
+        :global(p) {
             max-width: min(80%, 300px);
             line-height: 1.4;
         }
 
-        & > * {
+        & > :global(*) {
             opacity: 0;
             transform: translate3d(0, 8px, 0);
             transition: opacity 0.7s var(--ease-quart), transform 0.8s var(--ease-quart);
@@ -97,15 +97,15 @@
         a:hover {
             transform: scale(1.0375) rotate(2deg) translateZ(0);
 
-            .photo-card__info {
-                & > * {
+            :global(.photo-card__info) {
+                :global(*) {
                     opacity: 1;
                     transform: translate3d(0,0,0);
                 }
-                picture {
+                :global(picture) {
                     transition-delay: 100ms;
                 }
-                p {
+                :global(p) {
                     transition-delay: 180ms;
                 }
             }