Hero section adaptive complete

src/components/hero.pug

@@ -7,6 +7,9 @@ section.hero.fullscreen-section(id="hero")
         +menu
       .header__links
         +socials
+        .header__gam-menu
+          a(href="#").nav__link
+            +icon('menu', 'nav__icon')
     .hero__content
       .user-info
         h1.user-info__desc !{desc}

src/styles/blocks/header.pcss

@@ -7,4 +7,26 @@
 
 .header__menu {
   margin: 0 10px;
+
+  @include tablets {
+    display: none
+  }
+}
+
+.header__gam-menu {
+  display: none;
+
+  @include tablets {
+    display: block;
+  }
+}
+
+.header__links {
+
+  @include tablets {
+    display: flex;
+    .social {
+      margin-right: 90px;
+    }
+  }
 }

src/styles/blocks/hero.pcss

@@ -19,4 +19,8 @@
   display: flex;
   justify-content: center;
   padding-bottom: 25px;
+
+  @include tablets {
+    display: none;
+  }
 }

src/styles/blocks/nav.pcss

@@ -1,9 +1,57 @@
+.nav {
+  &--footer {
+    @include desktop {
+      .nav__item {
+        margin-right: 8%;
+      }
+    }
+
+    @include tablets {
+      .nav__list {
+        flex-wrap: wrap;
+      }
+
+      .nav__item {
+        margin-bottom: 30px;
+        margin-right: 12%;
+      }
+    }
+
+    @include phones {
+      .nav__item {
+        margin-right: 15%;
+      }
+    }
+  }
+}
+
+.nav__link {
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.nav__icon {
+  height: 24px;
+  width: 24px;
+  display: block;
+  fill: currentColor;
+}
+
 .nav__list {
   display: flex;
 }
 
 .nav__item {
-  margin-right: 50px;
+  margin-right: 60px;
+
+  @include tabletsLg {
+    margin-right: 20px;
+  }
 
   &:hover,
   &:active {

src/styles/blocks/scroll-down.pcss

@@ -9,7 +9,7 @@
     width: 30px;
     height: 35px;
     content: "";
-    background: svg-load('scroll.svg', fill=currentColor, width=100%, height=100%) center center no-repeat;
+    background: svg-load('scroll.svg', fill=$font, width=100%, height=100%) center center no-repeat;
     margin-left: 20px;
     display: inline-block;
   }

src/styles/blocks/socials.pcss → src/styles/blocks/social.pcss

@@ -1,5 +1,11 @@
 .social {
+  @include phones {
+    display: none;
+  }
+
   &--footer {
+    display: block;
+
     .social__icon {
       width: 25px;
       height: 25px;

src/styles/blocks/triangles.pcss

@@ -4,13 +4,49 @@
   margin-top: -120px;
   color: #fff;
 
+  @include desktop {
+    margin-top: -80px;
+  }
+
+  @include tablets {
+    margin-top: -50px;
+  }
+
+  @include phones {
+    margin-top: -20px;
+  }
+
   &--bottom {
     margin-top: 0;
     margin-bottom: -89px;
 
+      @include desktop {
+        margin-bottom: -59px;
+      }
+
+      @include tablets {
+        margin-bottom: -39px;
+      }
+
+      @include phones {
+        margin-bottom: -19px;
+      }
+
     .triangles__item {
       height: 90px;
       z-index: 10;
+
+      @include desktop {
+        height: 60px;
+      }
+
+      @include tablets {
+        height: 40px;
+      }
+
+      @include phones {
+        height: 20px;
+      }
     }
   }
 }
@@ -20,4 +56,16 @@
   display: block;
   height: 120px;
   fill: $white;
+
+  @include desktop {
+    height: 80px;
+  }
+
+  @include tablets {
+    height: 50px;
+  }
+
+  @include phones {
+    height: 20px;
+  }
 }

src/styles/blocks/user-info.pcss

@@ -1,17 +1,64 @@
 .user-info {
   text-align: center;
   max-width: 505px;
+
+  @include desktop {
+    max-width: 734px;
+    display: flex;
+  }
+
+  @include tablets {
+    max-width: 430px;
+    display: initial;
+  }
+
+  @include phones {
+    max-width: 260px;
+  }
 }
 
 .user-info__username {
   font-size: 72px;
   line-height: 60px;
   font-weight: 800;
+
+  @include desktop {
+    flex: 2;
+    text-align: left;
+  }
+
+  @include tablets {
+    font-size: 48px;
+    text-align: inherit;
+    line-height: 1;
+  }
+
+  @include phones {
+    font-size: 36px;
+  }
 }
 
 .user-info__desc {
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 30px;
   opacity: .4;
+
+  @include desktop {
+    margin-bottom: 0;
+    flex: 1;
+    text-align: right;
+    margin-right: 60px;
+  }
+
+  @include tablets {
+    font-size: 16px;
+    text-align: inherit;
+    margin-bottom: 30px;
+    margin-right: 0;
+  }
+
+  @include phones {
+    font-size: 14px;
+  }
 }

src/styles/layout/base.pcss

@@ -1,10 +1,10 @@
 html {
-  @include desktop {
+  /* @include desktop {
     font-size: 15px;
   }
   @include tablets {
     font-size: 14px;
-  }
+  } */
 }
 body,
 html {
@@ -30,8 +30,7 @@ body {
   margin: 0 auto;
   max-width: 1480px;
   width: 95%;
-  /* width: 1490px; */
-
+
   @include phones {
     width: 85%;
   }