Create Heading component

Intro title with p

src/components/molecules/Heading.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+
+    import SiteTitle from '$components/atoms/SiteTitle.svelte';
+
+    export let text: string
+
+</script>
+
+<section class="heading">
+    <SiteTitle variant="inline" />
+    <p class="text-medium">{text}</p>
+</section>

src/style/molecules/_heading.scss

@@ -0,0 +1,27 @@
+.heading {
+    overflow: hidden;
+    color: $color-tertiary;
+    text-align: center;
+
+    // Title
+    h1 {
+        color: $color-secondary;
+        line-height: 1;
+        margin-top: 56px;
+
+        @include bp (sm) {
+            margin-top: 160px;
+        }
+    }
+    // Text
+    p {
+        max-width: 260px;
+        margin: 40px auto 0;
+        font-weight: 200;
+
+        @include bp (sm) {
+            margin: 72px auto 130px;
+            max-width: 600px;
+        }
+    }
+}

src/style/style.scss

@@ -44,6 +44,7 @@
 @import "molecules/photo-card";
 @import "molecules/location";
 @import "molecules/switcher";
+@import "molecules/heading";
 
 // Organisms
 @import "organisms/locations";