feat(shian): dynamic page header size depending on content

src/sass/common/_base.scss

@@ -75,6 +75,7 @@ body {
   h5,
   h6 {
     font-weight: 300;
+    color: var(--accent-color);
   }
   h1 {
     font-size: $text-4xl;

src/sass/components/_pageheader.scss

@@ -1,37 +1,56 @@
 .page-header {
   position: relative;
   width: 100%;
-    min-height: 200px;
-    height: 70vh;
-    color: $white;
+  min-height: 50vh;
   font-weight: 300;
-    min-height: 300px;
-    height: 70vh;
+  overflow: hidden;
+  @include screen(md) {
+    min-height: 70vh;
+  }
+  display: flex;
+  align-items: flex-end;
 
   &__background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: -10;
     width: 100%;
     height: 100%;
   }
   &__overlay {
+    z-index: -10;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
   }
 
   &__contents {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        @include py(0.5rem);
-        a {
+    z-index: 1;
+    padding-top: 3rem;
+    @include screen(md) {
+      padding-top: 4rem;
+    }
+    color: $white;
+    a,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
       color: $white;
     }
   }
 
   &__icon {
-        width: 6rem;
-        height: 6rem;
+    width: 3rem;
+    height: 3rem;
+    @include screen(md) {
+      width: 4rem;
+      height: 4rem;
+    }
   }
 }
-