I have already finished the mobile, tablet and Desktop design

assets/styles/components/Footer.scss

@@ -0,0 +1,34 @@
+.footer{
+  width: $width;
+  height:$heightOthers;
+  padding: 20px 50px;
+  display: grid;
+  justify-content:$justify-content;
+  background-color: $colorDark;
+
+  #article-footer{
+    align-self: center;
+
+  }
+
+  #article-footer p{
+    text-align: $text-alignp;
+    font-size: $font-sizep;
+    line-height: $line-heightp;
+    padding: $paddingp;
+    color:$colorLight;
+
+  }
+  #article-footer p > a{
+    text-decoration: none;
+    color:gray;
+  }
+ #article-footer p > a:hover{
+    color:$colorLight;
+  }
+
+
+
+
+
+}

assets/styles/components/Header.scss

@@ -0,0 +1,25 @@
+
+.container-header {
+  width: $width;
+  padding: 100px 0;
+  display: grid;
+  text-align: center;
+
+  article {
+    h1{
+      display: inline-block;
+      font-weight:bolder;
+      font-size: $font-size;
+      margin: 0;
+    }
+
+    h3 {
+      font-weight: lighter;
+      font-size: 1.5em;
+    }
+  }
+
+  #figure-header h3{
+    padding: $paddingp;
+  }
+}

assets/styles/components/_main.scss

@@ -1,3 +1,39 @@
-h1 {
-  color: $colorDark;
+body {
+  section {
+    width: $width;
+    height: $heightOthers;
+    padding: 20px 50px;
+    display: grid;
+    justify-content: center;
+    background-color: rgba(10, 10, 10, .10);
+
+    article {
+      h2 {
+        text-align: center;
+        font-size: $font-size;
+      }
+    }
+  }
+
+  h1 {
+    color: $colorDark;
+  }
+
+  p{
+    font-size: $font-sizep;
+    line-height: $line-heightp;
+    text-align: center;
+
+  }
+
+  figure{
+    padding:$paddingp;
+
+    img{
+      width: $width;
+      max-width:$max-width;
+      border-radius: $borderRadius;
+    }
+  }
 }
+

assets/styles/modules/_breakpoints.scss

@@ -1,7 +1,43 @@
 //BREAKPOINTS MOBILE FIRST
-
+@import "variables";
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) {}
+@media (min-width: 768px) {
+  article p{
+    text-align: center;
+  }
+  #mainSection{
+
+    display: grid;
+    align-self: center;
+    article{
+      align-self: center;
+    }
+  }
+
+}
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) {}
+@media (min-width: 992px) {
+    .container-header{
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        article {
+          align-self: center;
+        }
+    }
+  section{
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      article {
+        align-self: center;
+        p{
+         text-align: center;
+        }
+      }
+  }
+  #mainSection {
+    display: grid;
+    grid-template-columns: 1fr 10px;
+    justify-content: center;
+  }
+}

assets/styles/modules/_variables.scss

@@ -1,2 +1,18 @@
+
 $colorLight: #fff;
 $colorDark: #000;
+$width: 100%;
+$borderRadius: 20px;
+$paddingH: 100px;
+$paddingp: 1em 1em 0 1em;
+$justify-content: center;
+$height: 100vh;
+$heightOthers: 75vh;
+$font-size: 42px;
+$text-align: center;
+$font-sizeSub: 80px;
+$font-sizep: 16px;
+$line-heightp: 1.6em;
+$text-alignp: center;
+$max-width: 800px;
+

assets/styles/styles.scss

@@ -1,10 +1,12 @@
 // CONFIG MODULES
-@import "modules/app";
-@import "modules/breakpoints";
-@import "modules/mixins";
-@import "modules/typography";
-@import "modules/variables";
+@import "modules/app.scss";
+@import "modules/breakpoints.scss";
+@import "modules/mixins.scss";
+@import "modules/typography.scss";
+@import "modules/variables.scss";
 
 // COMPONENTS
-@import "components/main";
-@import "components/hero";
+@import "components/main.scss";
+@import "components/hero.scss";
+@import "components/Header.scss";
+@import "components/Footer.scss";