Make blog top/bottom paddings standardize

_includes/faq_bottom.html

@@ -1,4 +1,4 @@
-<section class="faq__bottom-info">
+<section class="faq__bottom-info py-4">
   <div class="wrapper">
     <img class="faq__gift" src="/assets/images/faq/gift-dynamic-premium-1.webp" alt="gift">
     {% if page.type == 'team' %}

_includes/popular_posts.html

@@ -1,4 +1,4 @@
-<div class="blog-popular">
+<div class="blog-popular py-4">
   <div class="wrapper">
     <h2 class="message inria-bold text-upcase mb-0">Most popular on the blog</h2>
     <div class="posts">

_includes/services_development_consultation.html

@@ -1,10 +1,10 @@
-<div class="development__offer">
+<div class="development__offer py-4">
   <div class="wrapper">
     <p class="message white-text inria-regular mb-0">{{ site.data.web_dev_services.offer_text }}</p>
   </div>
 </div>
 
-<div class="web_dev_services__industries">
+<div class="web_dev_services__industries py-9">
   {% include solutions_subpages_carousel.html %}
   <a id="web_dev_button" class="button dev_services__carousel-btn" href="/contacts" data-link="transition">
     {{ site.data.services.approaches.button }}

_includes/solutions_bottom.html

@@ -1,4 +1,4 @@
-<section class="solutions_cases__idea wrap">
+<section class="solutions_cases__idea py-9">
   <div class="wrapper">
     <div class="solutions_cases__idea_img">
       <img src="/assets/images/hipaa/chat.webp" alt="chat">

_layouts/blog-template.html

@@ -3,12 +3,12 @@
 ---
 
 <section class="blog">
-  <div class="blog__main-block blog-main">
+  <div class="blog__main-block blog-main pt-9">
     <div class="wrapper">
       <div class="blog-main__header-description">
         <h1 class="page-title">{{ site.data.blog.title }}</h2>
         <h2 class="message inria-bold">{{ site.data.blog.description }}</p>
-          <ul class="blog-main__articles">
+          <ul class="blog-main__articles py-4">
             <p class="message cera-medium text-upcase text-left">{{ site.data.blog.articles.title }}</p>
             {% for element in site.data.blog.articles.lines %}
               <li>{{ element.description }}</li>
@@ -32,7 +32,7 @@ <h2 class="message inria-bold">{{ site.data.blog.description }}</p>
         </div>
         {{ content }}
 
-        <div class="posts">
+        <div class="posts mb-4">
           {% for post in paginator.posts %}
               {% assign name = post.post-id %}
               {% assign post = post %}
@@ -47,7 +47,7 @@ <h2 class="message inria-bold">{{ site.data.blog.description }}</p>
             {% assign category-name = page.category %}
           {% endif %}
 
-          <div class="pagination">
+          <div class="pagination mb-4">
             {% if paginator.previous_page %}
               <a class="pagination__page" href="{{ paginator.previous_page_path | relative_url }}" data-link="blog-link">&lt;</a>
             {% else %}

_sass/_solutions_cases.scss

@@ -6,11 +6,7 @@
   }
 
   .list-with-images {
-    margin: 5vh 0 0;
-
     &__item {
-      .description.without-margin { margin-top: 0; }
-
       &-icon img { border-radius: 30px; }
 
       &-icon.big-img img {
@@ -133,9 +129,6 @@
 
     &__idea {
       flex-wrap: wrap;
-      padding: 1vh 5vh 5vh;
-
-      &.wrap { padding-top: 3vh; }
 
       &_img {
         width: 100%;

_sass/about.scss

@@ -20,13 +20,6 @@
       z-index: 1;
     }
 
-    &-container {
-      display: flex;
-      justify-content: space-between;
-      flex-wrap: wrap;
-      padding: 4.5vh 0 3vh;
-    }
-
     .crew__item {
       background-color: rgba($white, .75);
       box-shadow: inset -1px 4px 13px -5px $white, inset -1px -5px 5px grey, 2px 1px 12px 0px $black;
@@ -108,10 +101,7 @@
     }
   }
 
-  &__testimonials {
-    background: center/cover no-repeat url('/assets/images/about/about-bg.webp');
-    padding: 150px 0 80px 0;
-  }
+  &__testimonials { background: center/cover no-repeat url('/assets/images/about/about-bg.webp'); }
 
   &__culture {
     min-height: 100vh;
@@ -193,16 +183,6 @@
   .about {
     .button { margin-top: 0; }
 
-    &__crew {
-      &-container { justify-content: center; }
-
-      &-item {
-        max-width: 55vw;
-        margin-bottom: 5vh;
-        padding: 10vw 5vw;
-      }
-    }
-
     &__benefits {
       .overlay {
         top: 53%;
@@ -244,8 +224,6 @@
         &-description { font-size: .9em; }
       }
     }
-    &__testimonials { padding: 60px 0; }
-
     &__culture-button { min-width: 300px; }
   }
 

_sass/blog.scss

@@ -2,7 +2,6 @@
   &__main-block {
     background: linear-gradient(180deg, $kviten 0%, $white 30%);
     box-shadow: 0px 4px 25px 0px rgba($purple-heart, .25);
-    padding-top: 117px;
   }
 }
 
@@ -13,7 +12,6 @@
     background: no-repeat url('/assets/images/blog/yellow_sticker.webp');
     background-position: top 50% right 0;
     background-size: 30%;
-    padding: 50px 0;
     text-align: left;
 
     li {
@@ -62,19 +60,14 @@
 
 .blog-popular {
   background-color: $main-lilac;
-  padding: 40px 0 20px 0;
-
-  .wrapper {
-    .posts { padding-top: 30px; }
-  }
+  .wrapper { .posts { padding-top: 30px; } }
 }
 
 .posts {
   display: grid;
   grid-template-columns: repeat(auto-fill,minmax(250px, 1fr));
   grid-column-gap: 31px;
   row-gap: 31px;
-  margin-bottom: 40px;
 
   a {
     color: $black;
@@ -139,7 +132,6 @@
     z-index: 2;
 
     &:last-child { padding-bottom: 5px; }
-
     span { font-family: 'Cera Regular'; }
   }
 
@@ -154,8 +146,6 @@
 }
 
 .pagination {
-  margin: 0 0 40px 0;
-
   &__page {
     color: $black;
     font-size: 16px;

_sass/buttons.scss

@@ -15,6 +15,7 @@
   font-family: 'Cera-Medium';
   font-size: 16px;
   letter-spacing: 0.5em;
+  text-align: center;
   text-decoration: none;
   text-transform: uppercase;
   transition: all .3s ease;

_sass/carousel.scss

@@ -1,5 +1,5 @@
 .carousel-scroll{
-  margin: 20px auto;
+  margin: 0 auto;
   max-width: 950px;
   position: relative;
 
@@ -180,6 +180,7 @@
 
 @media (max-width: 767px ) {
   .carousel-scroll {
+    &__scroller { height: 450px; }
     &__animate-visibility {
       padding: 15px;
       width: 250px;

_sass/contacts.scss

@@ -4,7 +4,7 @@
   background-repeat: no-repeat;
   background-size: cover;
   box-shadow: 0px 2px 10px 10px rgba(23, 19, 43, 0.10);
-  padding: 191px 0;
+  padding-bottom: 200px;
 
   &__field {
     border: none;
@@ -109,7 +109,7 @@
 
 @media (max-width: 767px) {
   .contacts {
-    padding: 73px 0 250px 0;
+    padding-bottom: 250px;
     &__form-group { max-width: 300px; }
     &__form-label { font-size: 12px; }
     &__form-select::before { top: 45px; }

_sass/development.scss

@@ -5,8 +5,6 @@
   }
 
   .list-with-images {
-    margin: 8vh 0;
-
     &__item {
       margin-bottom: 3vh;
 
@@ -76,7 +74,6 @@
 
   &__offer {
     background: $main-gradient;
-    padding: 7vh 0;
     box-shadow: 2px 2px 20px 4px rgba(0, 0, 0, .25);
   }
 }
@@ -110,8 +107,6 @@
     }
 
     .list-with-images {
-      margin: 6vh 0;
-
       &__item .description {
         font-size: .8em;
         line-height: 1.5;

_sass/ecommerce.scss

@@ -1,7 +1,6 @@
 .ecommerce {
   &__main {
     background-image: linear-gradient(135deg, $black_sea, $main-violet);
-    padding: 137px 0 55px 0;
 
     .list-with-images.horizontal .list-with-images__item {
       &:nth-child(-n+2) {
@@ -46,19 +45,16 @@
 
   &__help {
     background: $titan_white;
-    padding: 72px 0 79px 0;
   }
 
   .solutions_cases__case_study {
     box-shadow: inset 0px 4px 25px 0px rgba($purple-heart, .25);
-    padding: 89px 0 93px 0;
     &_image img { max-width: 250px; }
   }
 
   &__project {
     background-image: linear-gradient(to top left, $purple-heart, $black_sea);
     box-shadow: $light-purple-shadow;
-    padding: 106px 0 92px 0;
     .purple-text { color: $buzok; }
 
     .list-with-images {
@@ -100,18 +96,11 @@
 
     .solutions_cases__case_study {
       box-shadow: inset 0px 14px 25px -15px rgba($purple-heart, .25);
-      padding: 60px 0 42px 0;
       &_image img { max-width: 140px; }
     }
-
-    &__main {
-      padding: 79px 0 25px 0;
-      .list-with-images.horizontal .list-with-images__item { margin-top: 1vh; }
-    }
-    &__help { padding: 52px 0 18px 0; }
+    &__main { .list-with-images.horizontal .list-with-images__item { margin-top: 1vh; } }
 
     &__project {
-      padding: 60px 0 56px 0;
 
       .list-with-images {
         &__item {

_sass/expertise.scss

@@ -4,21 +4,8 @@
     box-shadow: 0px 0px 20px -3px grey;;
     img { margin: 5vh 0; }
   }
-  &__industries { padding: 80px 0; }
-
-  &__solutions {
-    &.wrap {
-      padding-top: 5vh;
-      padding-bottom: 5vh;
-    }
-    .button { margin-top: 30px; }
-  }
-
-  &__testimonials {
-    background: center/cover no-repeat url('/assets/images/about/about-bg.webp');
-    padding-bottom: 60px;
-    .wrapper { padding-top: 8vh; }
-  }
+  &__solutions { .button { margin-top: 30px; } }
+  &__testimonials { background: center/cover no-repeat url('/assets/images/about/about-bg.webp'); }
 
   &__tell-us {
     min-height: 85vh;
@@ -203,7 +190,6 @@
       margin-right: -15px;
       margin-left: -15px;
     }
-    &__industries { padding: 60px 0; }
     &__tell-us { min-height: 50vh; }
   }
 }

_sass/faq.scss

@@ -4,7 +4,6 @@
                 linear-gradient(132deg, $palianytsia 8.4%, $buzok 52.42%, $sky-ua 93.77%);
     background-blend-mode: luminosity;
     background-position: top 87px left 0, top 0 left 0;
-    padding: 191px 0 113px 0;
     position: relative;
 
     &::after {
@@ -57,25 +56,21 @@
     max-height: 0;
     overflow: hidden;
     transition: max-height 500ms ease-out, border-bottom 0ms 500ms linear;
-
     .description { margin: 21px 10px 33px 63px}
-
     p, li { text-align: justify; }
   }
   ul { margin: 0 0 0 10px; }
 
   &__bottom-info {
     background: linear-gradient(116deg, $purple-heart 0%, $sky-ua 100%);
     box-shadow: 2px 2px 20px 4px rgba(0, 0, 0, 0.25);
-    padding: 26px 0 24px 0;
 
     .wrapper {
       align-items: center;
       display: flex;
       justify-content: space-around;
     }
   }
-
   &__gift { mix-blend-mode: luminosity; }
 }
 
@@ -96,7 +91,6 @@
         margin-bottom: 2em;
       }
     }
-
     &__gift { margin-bottom: 24px; }
   }
 }
@@ -106,7 +100,6 @@
     &__main-content {
       background-position: top 100px left 0, top 0 left 0;
       background-size: 140px 140px, cover;
-      padding: 66px 0 88px 0;
 
       &::after {
         bottom: -4%;