fix: add adaptive to article

src/feature/article/consultation/styles.module.scss

@@ -1,10 +1,31 @@
 .Container {
   margin: 0 auto;
-  width: rem(1540px);
+  max-width: rem(1540px);
   display: grid;
-  grid-template-columns: auto 360px;
-  gap: 160px;
-  padding: 0 40px;
+  grid-template-columns: auto;
+  grid-template-rows: auto auto;
+  justify-content: center;
+  gap: 10px;
+  padding: 0 10px;
+
+  @include iftablet{
+    grid-template-columns: auto 200px;
+    grid-template-rows: auto;
+    justify-content: unset;
+    gap: 20px;
+    padding: 0 20px;
+  }
+
+  @include iflaptop{
+    grid-template-columns: auto 300px;
+    gap: 40px;
+    padding: 0 28px;
+  }
+  @include ifdesktop{
+    grid-template-columns: auto 360px;
+    gap: 160px;
+    padding: 0 40px;
+  }
 }
 
 .Consultation {
@@ -16,23 +37,54 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: rem(60px);
+    gap: rem(16px);
     padding: rem(20px) 0;
 
+    @include iftablet{
+      gap: rem(20px);
+    }
+    @include iflaptop{
+      gap: rem(40px);
+    }
+    @include ifdesktop{
+      gap: rem(60px);
+    }
+
     .Header {
       font-family: $font-roboto;
       font-weight: 300;
-      font-size: rem(38px);
+      font-size: rem(20px);
       line-height: 100%;
       color: $color-white;
       text-transform: uppercase;
+
+      @include iftablet{
+        font-size: rem(24px);
+      }
+
+      @include iflaptop{
+        font-size: rem(28px);
+      }
+
+      @include ifdesktop{
+        font-size: rem(38px);
+      }
     }
 
     .Form {
       display: grid;
-      grid-template-columns: repeat(3, 1fr);
+      grid-template-columns: auto;
+      grid-template-rows: repeat(3, 1fr);
       gap: rem(20px);
       width: 100%;
+      max-width: rem(460px);
+
+      @include iftablet{
+        grid-template-columns: repeat(3, 1fr);
+        grid-template-rows: auto;
+        width: 100%;
+        max-width: 100%;
+      }
     }
   }
 
@@ -45,6 +97,18 @@
     margin: rem(20px) 0;
     padding: rem(20px);
     border-radius: rem(20px);
+    max-width: 460px;
+
+    @include iftablet{
+      margin: rem(10px) 0;
+      padding: rem(10px);
+    }
+
+    @include iflaptop{
+      margin: rem(20px) 0;
+      padding: rem(20px);
+    }
+
 
     .Title {
       font-family: $font-roboto;

src/feature/article/related-articles/styles.module.scss

@@ -1,11 +1,30 @@
 .Related {
   .Container {
     margin: 0 auto;
-    width: rem(1540px);
+    max-width: rem(1540px);
     display: grid;
-    grid-template-columns: auto 360px;
-    gap: 160px;
-    padding: 0 40px;
+    grid-template-columns: auto auto;
+    gap: 0;
+    padding: 0 10px;
+
+    @include iftablet {
+      padding: 0 20px;
+    }
+    @include iflaptop {
+      grid-template-columns: auto 300px;
+      gap: 40px;
+      padding: 0 28px;
+    }
+    @include ifdesktop {
+      grid-template-columns: auto 360px;
+      gap: 160px;
+      padding: 0 40px;
+    }
+
+    .Block {
+      display: flex;
+      flex-direction: column;
+    }
   }
 
   .Header {
@@ -19,10 +38,14 @@
 
   .Grid {
     display: grid;
-    grid-template-columns: auto auto;
+    grid-template-columns: auto;
     gap: 16px;
     margin-bottom: 20px;
 
+    @include iftablet{
+      grid-template-columns: auto auto;
+    }
+
     .Title {
       font-family: $font-roboto;
       font-weight: 500;

src/feature/article/related-articles/ui.tsx

@@ -11,7 +11,7 @@ function RelatedArticles({ related }: RelatedArticlesProps) {
   return (
     <section className={s.Related}>
       <div className={s.Container}>
-        <div>
+        <div className={s.Block}>
           <h3 className={s.Header}>
             Похожие услуги, которые возможно Вас заинтересуют
           </h3>

src/feature/article/sidebar/styles.module.scss

@@ -1,8 +1,12 @@
 
 .Sidebar {
-  display: flex;
-  flex-direction: column;
-  gap: rem(40px);
+  display: none;
+
+  @include iflaptop{
+    display: flex;
+    flex-direction: column;
+    gap: rem(40px);
+  }
 
   .Estimation {
     background: $color-green;
@@ -45,10 +49,14 @@
     .Phone {
       font-family: $font-roboto;
       font-weight: 500;
-      font-size: rem(32px);
+      font-size: rem(24px);
       line-height: 100%;
       color: $color-white;
       text-transform: uppercase;
+
+      @include ifdesktop{
+        font-size: rem(32px);
+      }
     }
   }
 

src/feature/article/sidebar/ui.tsx

@@ -13,7 +13,7 @@ function Sidebar({
   warranties,
 }: SidebarProps) {
   return (
-    <div className={s.Sidebar}>
+    <aside className={s.Sidebar}>
       <div className={s.Estimation}>
         <h4 className={s.Title}>Срок выполнения:</h4>
         <p className={s.Estimate}>от {estimate} дней</p>
@@ -49,7 +49,7 @@ function Sidebar({
           </ul>
         </div>
       )}
-    </div>
+    </aside>
   );
 }