Make discover into reusable class

src/routes/index.svelte

@@ -43,7 +43,7 @@
     </section>
 
     <div class="homepage__ctas" id="ctas">
-        <p>
+        <p class="discover">
             Discover <strong>{count.photos} homes</strong><br>
             from <strong>{count.locations} cities</strong>
             of <strong>{count.countries} countries</strong>

src/style/atoms/_discover.scss

@@ -0,0 +1,17 @@
+.discover {
+    font-family: $font-sans;
+    font-size: rem(28px);
+    color: $color-tertiary;
+    font-weight: 300;
+    line-height: 1.5;
+    padding: 0 20px;
+
+    @include bp (sm) {
+        font-size: rem(32px);
+    }
+
+    strong {
+        font-weight: 300;
+        color: $color-secondary;
+    }
+}

src/style/pages/_homepage.scss

@@ -183,24 +183,6 @@
             margin-bottom: 160px;
         }
 
-        p {
-            font-family: $font-sans;
-            font-size: rem(28px);
-            color: $color-tertiary;
-            font-weight: 300;
-            line-height: 1.5;
-            padding: 0 20px;
-
-            @include bp (sm) {
-                font-size: rem(32px);
-            }
-
-            strong {
-                font-weight: 300;
-                color: $color-secondary;
-            }
-        }
-
         .cards {
             justify-content: center;
             margin-top: 48px;

src/style/style.scss

@@ -31,6 +31,7 @@
 @import "atoms/button";
 @import "atoms/badge";
 @import "atoms/arrow";
+@import "atoms/discover";
 @import "atoms/box-cta";
 @import "atoms/site-title";