Create a component for scrolling huge titles

src/style/atoms/_scrolling-title.scss

@@ -0,0 +1,5 @@
+.scrolling-title {
+    transform: translate3d(calc(-1px * var(--parallax-x) * 100), 0, 0);
+    transition: transform 1.2s var(--ease-quart);
+    will-change: transform;
+}

src/style/pages/_homepage.scss

@@ -2,6 +2,7 @@
 .homepage {
     // Site title
     &__title {
+        // Houses
         &--houses {
             margin: -20px 0 0;
             color: $color-secondary;
@@ -9,8 +10,15 @@
 
             @include bp (sm) {
                 margin-top: -100px;
+                margin-left: calc(-1 * clamp(24px, 6vw, 64px));
+            }
+
+            span {
+                transition: none;
+                letter-spacing: -0.06em;
             }
         }
+        // World
         &--world {
             color: $color-primary-tertiary20;
             text-align: center;
@@ -62,14 +70,22 @@
             }
         }
     }
-        // Text
-        &__description {
+        // Headline
+        &__headline {
             max-width: 350px;
-            margin: 100px auto 32px;
+            margin: 100px auto 0;
 
             @include bp (sm) {
-                margin: 20px auto 32px;
                 max-width: 524px;
+                margin-top: 20px;
+            }
+
+            p {
+                margin-bottom: 24px;
+
+                @include bp (sm) {
+                    margin-bottom: 32px;
+                }
             }
         }
 

src/style/style.scss

@@ -43,6 +43,7 @@
 @import "atoms/discover";
 @import "atoms/box-cta";
 @import "atoms/site-title";
+@import "atoms/scrolling-title";
 @import "atoms/photo";
 
 // Molecules