🔥 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/organisms/_newsletter.scss

@@ -36,14 +36,12 @@
         }
 
         // Form
-        .past-issues {
-            &:hover {
-                &, span {
-                    color: $color-secondary;
-                }
-                span {
-                    border-color: $color-secondary;
-                }
+        :global(.past-issues:hover) {
+            color: $color-secondary;
+
+            :global(span) {
+                color: $color-secondary;
+                border-color: $color-secondary;
             }
         }
     }
@@ -56,15 +54,19 @@
     &--default {
         background: $color-tertiary 50% 0 / cover url(#{$dir-img}/newsletter-beige.jpg) no-repeat;
 
-        .newsletter-form__email {
+        :global(.newsletter-form__email) {
             background: $color-tertiary;
+
+            :global(input::placeholder) {
+                color: $color-gray;
+            }
         }
      }
     // Light
     &--light {
         background: $color-cream 50% 0 / cover url(#{$dir-img}/newsletter-cream.jpg) no-repeat;
 
-        .newsletter-form__email {
+        :global(.newsletter-form__email) {
             background: $color-cream;
         }
     }