fixed content paddings on correct layout

src/scripts/main.js

@@ -87,8 +87,7 @@ document.addEventListener('DOMContentLoaded', function () {
         document.querySelector('.header').style.borderBottomLeftRadius =
           '200px';
         document.querySelector('.header').style.borderBottomRightRadius = '0';
-        document.querySelector('.header').style.backgroundColor =
-          cBlueBackground;
+        document.querySelector('.header').style.backgroundColor = cBlueBackground;
         document.querySelector('.top-bar__hire').classList.add('pink');
         document.querySelector('.header__button').style.borderRadius = '64px';
         document.querySelector('.header__button').style.backgroundColor = cPink;

src/styles/blocks/card.scss

@@ -11,10 +11,12 @@
 
   @include on-tablet {
     width: 264px;
+    flex: 0 0 calc(50% - 30px);
   }
 
   @include on-phone {
     width: 280px;
+    flex: unset;
   }
 
   &__number {

src/styles/blocks/footer.scss

@@ -6,6 +6,20 @@
   border-top-right-radius: 30px;
   box-shadow: 0 -150px 0 10px $c-white;
 
+  &__content {
+    @include page-grid;
+
+    grid-column: span 12;
+
+    @include on-tablet {
+      grid-column: span 6;
+    }
+
+    @include on-phone {
+      grid-column: span 2;
+    }
+  }
+
   &__form-title {
     @include text-styler(Poppins, 600, 32px, 48px, $c-white);
 

src/styles/blocks/form.scss

@@ -57,7 +57,7 @@
     &:-webkit-autofill:focus {
       border-bottom-color: $c-blue;
       -webkit-text-fill-color: $c-white;
-      -webkit-box-shadow: 0 0 0px 1000px $c-dark-gray inset;
+      -webkit-box-shadow: 0 0 0 1000px $c-dark-gray inset;
       caret-color: $c-white;
     }
   }

src/styles/blocks/header.scss

@@ -7,15 +7,19 @@
   border-bottom-right-radius: 32px;
 
   @include on-tablet {
-    height: 100%;
+    height: 893px;
   }
 
   &__content {
-    @include element-grid;
+    @include page-grid;
 
     grid-column: 1 / -1;
     grid-row: 2;
 
+    @include on-tablet {
+      position: relative;
+    }
+
     @include on-phone {
       grid-column: span 2;
       grid-row: unset;
@@ -82,3 +86,15 @@
     }
   }
 }
+
+@media (max-width: 464px) {
+  .header {
+    height: 955px;
+  }
+}
+
+@media (max-width: 354px) {
+  .header {
+    height: 983px;
+  }
+}

src/styles/blocks/info.scss

@@ -24,6 +24,7 @@
     &-link {
       color: $c-white;
       text-decoration: none;
+
       @include hover(text-shadow, 0 0 2px $c-white);
     }
 

src/styles/blocks/our-expertise.scss

@@ -1,5 +1,5 @@
 .our-expertise {
-  @include element-grid;
+  @include page-grid;
   @include white-bg(30px, 100%);
 
   &__title {

src/styles/blocks/services.scss

@@ -1,9 +1,9 @@
 .services {
-  @include element-grid;
+  @include page-grid;
 
   @include on-tablet {
     row-gap: 40px;
-    margin: 0 0 132px;
+    margin-bottom: 132px;
   }
 
   &__content {

src/styles/blocks/slider.scss

@@ -7,18 +7,19 @@
   overflow: hidden;
 
   @include on-tablet {
-    position: relative;
     grid-column: span 6;
+    left: 0;
+    bottom: -465px;
     width: 100vw;
     height: 390px;
     justify-self: center;
-    margin: 147px 0 0;
   }
 
   @include on-phone {
     grid-column: span 2;
+    left: 0;
+    bottom: -455px;
     object-fit: contain;
-    margin: 48px 0 0;
   }
 
   &__slides {

src/styles/blocks/testimonials.scss

@@ -1,5 +1,5 @@
 .testimonials {
-  @include element-grid;
+  @include page-grid;
 
   grid-column: span 12;
 

src/styles/blocks/top-bar.scss

@@ -1,5 +1,5 @@
 .top-bar {
-  @include element-grid;
+  @include page-grid;
 
   place-content: center;
   height: 120px;
@@ -36,6 +36,7 @@
     display: flex;
     align-items: center;
     grid-column: -2 / -1;
+    width: 67px;
 
     @include nav-link-styles;
 
@@ -73,6 +74,10 @@
     justify-content: space-between;
     align-items: center;
     gap: 32px;
+
+    @include on-phone {
+      justify-content: unset;
+    }
   }
 
   &__menu-link {

src/styles/blocks/vision.scss

@@ -1,5 +1,5 @@
 .vision {
-  @include element-grid;
+  @include page-grid;
 
   background-color: $c-white;
   justify-items: center;

src/styles/blocks/who-we-are.scss

@@ -1,5 +1,5 @@
 .who-we-are {
-  @include element-grid;
+  @include page-grid;
 
   margin-block-start: 148px;
 

src/styles/utils/_mixins.scss

@@ -24,7 +24,7 @@
 }
 
 @mixin on-tablet {
-  @media (max-width: 1080px) {
+  @media (max-width: 1024px) {
     @content;
   }
 }
@@ -41,29 +41,29 @@
   display: grid;
   justify-content: center;
   column-gap: 30px;
-  grid-template-columns: repeat(var(--columns), 68px);
+  grid-template-columns: repeat(var(--columns), 1fr);
 
   @include on-desktop-xl {
-    padding-inline: 54px;
+    margin-inline: 54px;
   }
 
   @include on-desktop {
-    padding-inline: 54px;
+    margin-inline: 54px;
     column-gap: 20px;
   }
 
   @include on-tablet {
     --columns: 6;
 
-    padding-inline: 41px;
+    margin-inline: 41px;
     column-gap: 30px;
   }
 
   @include on-phone {
     --columns: 2;
 
-    grid-template-columns: repeat(var(--columns), 130px);
-    padding-inline: 20px;
+    grid-template-columns: repeat(var(--columns), 1fr);
+    margin-inline: 20px;
     column-gap: 20px;
   }
 }
@@ -74,7 +74,7 @@
   display: grid;
   justify-content: center;
   column-gap: 30px;
-  grid-template-columns: repeat(var(--columns), 68px);
+  grid-template-columns: repeat(var(--columns), 1fr);
 
   @include on-desktop {
     column-gap: 20px;
@@ -90,25 +90,7 @@
     --columns: 2;
 
     column-gap: 20px;
-    grid-template-columns: repeat(var(--columns), 130px);
-  }
-}
-
-@mixin paddings {
-  @include on-desktop-xl {
-    padding-inline: 54px;
-  }
-
-  @include on-desktop {
-    padding-inline: 54px;
-  }
-
-  @include on-tablet {
-    padding-inline: 41px;
-  }
-
-  @include on-phone {
-    padding-inline: 20px;
+    grid-template-columns: repeat(var(--columns), 1fr);
   }
 }