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

@@ -0,0 +1,72 @@
+// Pagination
+.pagination {
+    position: relative;
+    display: block;
+    margin: auto 0;
+    cursor: pointer;
+
+    &[disabled] {
+        cursor: not-allowed;
+    }
+
+    // Progress
+    &__progress {
+        position: relative;
+        display: inline-block;
+        font-size: rem(88px);
+        color: rgba($color-text, 0.2);
+        font-family: $font-serif;
+        font-weight: 200;
+        line-height: 1;
+        letter-spacing: -0.05em;
+        transition: color 0.5s;
+
+        @include bp (sm) {
+            font-size: clamp(80px, 16vw, #{rem(160px)});
+        }
+
+        span {
+            display: inline-block;
+            margin: 0 -10px;
+        }
+    }
+
+    // Hover
+    &:not([disabled]):hover {
+        .pagination__progress {
+            color: rgba($color-text, 0.4);
+        }
+    }
+
+    // Label
+    :global(p) {
+        display: block;
+        margin: 16px auto 0;
+        text-align: center;
+        font-family: $font-sans;
+        text-transform: uppercase;
+        color: $color-text;
+        letter-spacing: 0.1em;
+        font-weight: 400;
+        font-size: rem(14px);
+    }
+
+    // More button
+    :global(.more) {
+        color: $color-secondary !important;
+    }
+
+    // Message
+    :global(.message) {
+        padding: clamp(96px, 24vw, 360px) 0 clamp(96px, 16vw, 280px);
+        text-align: center;
+        color: $color-text;
+        font-size: rem(24px);
+        font-weight: 200;
+        line-height: 1.4;
+
+        @include bp (sm) {
+            font-size: rem(28px);
+        }
+    }
+}