Edit site title large variant

src/components/atoms/SiteTitle.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-    export let variant: string = 'large'
+    export let variant: string = undefined
+    console.log(variant)
 </script>
 
-<h2 class="site-title site-title--{variant}">
+<h2 class="site-title {variant ? `site-title--${variant}` : ''}">
     <strong>Houses</strong>
     <span>Of The</span>
-    <strong class="site-title__pink">World</strong>
+    <strong>World</strong>
 </h2>

src/style/atoms/_site-title.scss

@@ -28,4 +28,26 @@
     &__pink {
         color: $color-secondary;
     }
+
+    // Large variant
+    &--large {
+        display: flex;
+        align-items: baseline;
+        justify-content: center;
+        color: $color-lightpurple;
+        margin: 0 auto;
+        line-height: 1;
+
+        strong {
+            display: block;
+            font-size: rem(96px);
+            color: $color-secondary !important;
+        }
+        span {
+            display: block;
+            top: 0;
+            margin: 0 16px 0 24px;
+            font-size: rem(32px);
+        }
+    }
 }

src/style/organisms/_footer.scss

@@ -22,6 +22,10 @@
             grid-row: 1;
             margin: 0;
         }
+
+        strong:nth-of-type(2) {
+            color: $color-secondary;
+        }
     }
 
     &__links {