Fix header

src/index.html

@@ -63,11 +63,12 @@
     </div>
 
     <header class="header">
-        <div>
+        <div class="header__text">
             <p class="header__title">Fork app</p>
             <p class="header__subtitle">A real gamechanger in the world of web development</p>
             <p class="header__description">V. 2.8 for Mac and Windows</p>
         </div>
+        <div class="header__image">&nbsp;</div>
     </header>
     <div class="download">
         <a href="#" class="rounded-button rounded-button--very-strong download__rounded-button--translated">

src/scss/_buttons.scss

@@ -24,6 +24,10 @@
     @extend .rounded-button--strong;
     font-size: 21px;
     padding: 15px 60px;
+
+    @media all and (max-width: $phone) {
+      font-size: 14px;
+    }
   }
 
   &--uppercase {

src/scss/_header.scss

@@ -1,7 +1,21 @@
 .header {
-  background: black url(../img/header/img.png) no-repeat center 120px/ cover;
   height: 100vh;
   padding-top: 110px;
+  width: 100%;
+  display: table;
+  background: $hero-background;
+  min-width: 320px;
+}
+
+.header__text {
+  display: table-row;
+  background: $hero-background;
+}
+
+.header__image {
+  background: $hero-background url(../img/header/img.png) no-repeat center top / cover;
+  display: table-row;
+  height: 100%;
 }
 
 .header__title {
@@ -19,13 +33,7 @@
   color: $primary;
   text-align: center;
   margin-bottom: 0;
-}
-
-@media all and (max-width: $phone) {
-  .header__subtitle {
-    font-size: 24px;
-    text-transform: capitalize;
-  }
+  padding: 0 10px;
 }
 
 .header__description {
@@ -37,3 +45,19 @@
   text-transform: uppercase;
   text-align: center;
 }
+
+@media all and (max-width: $tablet) {
+  .header__title {
+    font-size: 60px;
+  }
+
+  .header__subtitle {
+    font-size: 20px;
+    text-transform: capitalize;
+  }
+
+
+  .header__description {
+    font-size: 14px;
+  }
+}

src/scss/_variables.scss

@@ -7,6 +7,8 @@ $light-text: #a291a5;
 $gray-text: #c8cbcf;
 $lightgray-text: #d3d1da;
 
+$hero-background: #010005;
+
 $background-light: #f4f4f4;
 $background-violet: #4a3b4e;