From f20785993abc3c18f6823f1c8af7af201519dbb4 Mon Sep 17 00:00:00 2001
From: RedrockJS <smb.sochi@gmail.com>
Date: Mon, 7 Jul 2025 15:24:13 +0300
Subject: [PATCH] fix: add adaptive to article

---
 src/entities/callback-form/styles.module.scss | 22 +++++-
 src/entities/connect/style.module.scss        | 34 +++++++-
 src/entities/order-schema/styles.module.scss  | 79 +++++++++++++++++--
 .../article/consultation/styles.module.scss   | 78 ++++++++++++++++--
 .../related-articles/styles.module.scss       | 33 ++++++--
 src/feature/article/related-articles/ui.tsx   |  2 +-
 .../article/sidebar/styles.module.scss        | 16 +++-
 src/feature/article/sidebar/ui.tsx            |  4 +-
 src/shared/ui/input/styles.module.scss        |  3 +-
 .../expertise/autotech/styles.module.scss     | 25 +++++-
 src/views/expertise/autotech/ui.tsx           |  4 +-
 src/widgets/breadcrumbs/styles.module.scss    | 62 +++++++++++++--
 src/widgets/breadcrumbs/ui.tsx                |  7 +-
 13 files changed, 326 insertions(+), 43 deletions(-)

diff --git a/src/entities/callback-form/styles.module.scss b/src/entities/callback-form/styles.module.scss
index aeb8818..47a5d7c 100644
--- a/src/entities/callback-form/styles.module.scss
+++ b/src/entities/callback-form/styles.module.scss
@@ -6,6 +6,13 @@
   margin-bottom: 20px;
   display: flex;
   flex-direction: column;
+  max-width: 460px;
+  align-self: center;
+
+  @include iftablet{
+    max-width: unset;
+    align-self: unset;
+  }
 }
 
 
@@ -21,6 +28,17 @@
 
 .Form {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 40px;
+  grid-template-rows: repeat(3, 1fr);
+  grid-template-columns: auto;
+  gap: 10px;
+
+  @include iftablet{
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: repeat(3, 1fr);
+  }
+  @include iflaptop{
+  }
+  @include ifdesktop{
+  }
 }
\ No newline at end of file
diff --git a/src/entities/connect/style.module.scss b/src/entities/connect/style.module.scss
index ddf8895..10dd027 100644
--- a/src/entities/connect/style.module.scss
+++ b/src/entities/connect/style.module.scss
@@ -1,7 +1,22 @@
 .Container {
   display: grid;
-  grid-template-columns: auto 200px;
-  gap: 100px;
+  grid-template-columns: auto;
+  gap: 20px;
+
+  @include iftablet{
+    grid-template-columns: auto 200px;
+    gap: 40px;
+  }
+
+  @include iflaptop{
+    grid-template-columns: auto 200px;
+    gap: 40px;
+  }
+
+  @include ifdesktop{
+    grid-template-columns: auto 200px;
+    gap: 100px;
+  }
 }
 
 .Icons {
@@ -16,6 +31,21 @@
 
     .Image {
       margin-bottom: 16px;
+      width: 100px;
+      height: auto;
+
+      @include iftablet{
+        width: 120px;
+        height: auto;
+      }
+      @include iflaptop{
+        width: 120px;
+        height: auto;
+      }
+      @include ifdesktop{
+        width: 150px;
+        height: auto;
+      }
     }
 
     .Description {
diff --git a/src/entities/order-schema/styles.module.scss b/src/entities/order-schema/styles.module.scss
index 769585f..7c7a8f5 100644
--- a/src/entities/order-schema/styles.module.scss
+++ b/src/entities/order-schema/styles.module.scss
@@ -1,29 +1,96 @@
 .Container {
   display: grid;
-  grid-template-columns: repeat(7, 1fr);
+  grid-template-columns: 1fr;
+  gap: 20px 0;
   background: $color-green;
   padding: rem(20px);
   border-radius: rem(16px);
   margin-bottom: rem(40px);
 
-  .Block{
+  @include iftablet{
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: auto auto;
+    gap: 20px 0;
+  }
+  @include iflaptop{
+    grid-template-columns: repeat(7, 1fr);
+    grid-template-rows: auto;
+    justify-content: center;
+  }
+  @include ifdesktop{
+  }
+
+  .Block {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: rem(4px);
 
-    .Arrow{
-      margin-top: rem(50px);
+    .Arrow {
+      display: none;
+
+      @include iftablet{
+        display: block;
+        width: 50%;
+        height: auto;
+        margin-top: 5vh;
+      }
+
+      @include iflaptop{
+        width: 70%;
+        height: auto;
+        margin-top: 4vh;
+      }
+
+      @include ifdesktop{
+        width: 100%;
+        height: auto;
+        margin-top: 7vh;
+        margin-left: 1vw;
+      }
     }
 
-    .Text{
+    .Image {
+      width: auto;
+      height: 150px;
+
+      @include iftablet{
+        width: auto;
+        height: 120px;
+      }
+
+      @include iflaptop{
+        width: auto;
+        height: 80px;
+      }
+      @include ifdesktop{
+        width: auto;
+        height: 140px;
+      }
+    }
+
+    .Text {
       font-family: $font-roboto;
       font-weight: 400;
-      font-size: rem(14px);
+      font-size: rem(18px);
       line-height: 150%;
       color: $color-white;
       text-align: center;
       text-transform: uppercase;
+
+      @include iftablet {
+        font-size: rem(14px);
+      }
+
+      @include iflaptop {
+        font-size: rem(12px);
+        line-height: 120%;
+      }
+
+      @include ifdesktop {
+        font-size: rem(14px);
+        line-height: 150%;
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/src/feature/article/consultation/styles.module.scss b/src/feature/article/consultation/styles.module.scss
index 2853782..837b3a5 100644
--- a/src/feature/article/consultation/styles.module.scss
+++ b/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;
diff --git a/src/feature/article/related-articles/styles.module.scss b/src/feature/article/related-articles/styles.module.scss
index 92c6968..19f915e 100644
--- a/src/feature/article/related-articles/styles.module.scss
+++ b/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;
diff --git a/src/feature/article/related-articles/ui.tsx b/src/feature/article/related-articles/ui.tsx
index e0e3669..93027ff 100644
--- a/src/feature/article/related-articles/ui.tsx
+++ b/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>
diff --git a/src/feature/article/sidebar/styles.module.scss b/src/feature/article/sidebar/styles.module.scss
index c5cbb29..fe0d7a7 100644
--- a/src/feature/article/sidebar/styles.module.scss
+++ b/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);
+      }
     }
   }
 
diff --git a/src/feature/article/sidebar/ui.tsx b/src/feature/article/sidebar/ui.tsx
index 36e6c77..c37b0a2 100644
--- a/src/feature/article/sidebar/ui.tsx
+++ b/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>
   );
 }
 
diff --git a/src/shared/ui/input/styles.module.scss b/src/shared/ui/input/styles.module.scss
index 6f9017b..8e75a8b 100644
--- a/src/shared/ui/input/styles.module.scss
+++ b/src/shared/ui/input/styles.module.scss
@@ -8,7 +8,7 @@
   background: $color-white;
   border: 1px solid $color-darkgray;
   border-radius: rem(16px);
-  padding: rem(4px) rem(10px);
+  padding: rem(10px) rem(10px);
   transition: border ease .5s;
 
   font-family: $font-roboto;
@@ -20,6 +20,7 @@
 
   @include iftablet {
     font-size: rem(16px);
+    padding: rem(10px) rem(16px);
   }
 
   @include iflaptop {
diff --git a/src/views/expertise/autotech/styles.module.scss b/src/views/expertise/autotech/styles.module.scss
index 31ff09f..2b02494 100644
--- a/src/views/expertise/autotech/styles.module.scss
+++ b/src/views/expertise/autotech/styles.module.scss
@@ -1,10 +1,27 @@
 .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;
+  gap: 0px;
+  padding: 0 10px;
+
+  @include iftablet {
+    grid-template-columns: auto;
+    padding: 0 20px;
+  }
+
+  @include iflaptop {
+    padding: 0 28px;
+    gap: 40px;
+    grid-template-columns: auto 300px;
+  }
+
+  @include ifdesktop {
+    grid-template-columns: auto 360px;
+    gap: 160px;
+    padding: 0 40px;
+  }
 }
 
 .Article {
diff --git a/src/views/expertise/autotech/ui.tsx b/src/views/expertise/autotech/ui.tsx
index 34f0e35..18c234e 100644
--- a/src/views/expertise/autotech/ui.tsx
+++ b/src/views/expertise/autotech/ui.tsx
@@ -91,9 +91,7 @@ function AutoTech() {
             </p>
             <Connect />
           </div>
-          <aside>
-            <Sidebar {...sidebarData} />
-          </aside>
+          <Sidebar {...sidebarData} />
         </div>
       </section>
 
diff --git a/src/widgets/breadcrumbs/styles.module.scss b/src/widgets/breadcrumbs/styles.module.scss
index c3222b6..9146a0e 100644
--- a/src/widgets/breadcrumbs/styles.module.scss
+++ b/src/widgets/breadcrumbs/styles.module.scss
@@ -10,12 +10,24 @@
 
 .Breadcrumbs {
   margin: 0 auto;
-  width: rem(1540px);
-  padding: rem(20px) 40px;
+  max-width: rem(1540px);
+  padding: rem(20px) 10px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 
+  @include iftablet{
+    padding: rem(20px) 20px;
+  }
+
+  @include iflaptop{
+    padding: rem(20px) 28px;
+  }
+
+  @include ifdesktop{
+    padding: rem(20px) 40px;
+  }
+
   .Block {
     display: flex;
     flex-direction: column;
@@ -46,7 +58,7 @@
   }
 
   .Advertise {
-    display: flex;
+    display: none;
     flex-direction: column;
     align-items: center;
 
@@ -54,12 +66,40 @@
     background: $color-white;
     padding: rem(20px);
 
+    @include iftablet{
+      display: flex;
+    }
+    @include iflaptop{
+    }
+    @include ifdesktop{
+    }
+
+    .Image {
+      height: auto;
+
+      @include iftablet {
+        width: 200px;
+      }
+
+      @include iflaptop {
+        width: 300px;
+      }
+
+      @include ifdesktop {
+        width: auto;
+      }
+    }
+
     .Description {
       font-family: $font-roboto;
       font-weight: $font-light;
-      font-size: rem(16px);
+      font-size: rem(14px);
       line-height: 100%;
       color: $color-text;
+
+      @include iflaptop {
+        font-size: rem(16px);
+      }
     }
   }
 
@@ -68,7 +108,19 @@
 .Header {
   font-family: $font-roboto;
   font-weight: $font-regular;
-  font-size: rem(48px);
+  font-size: rem(24px);
   line-height: 110%;
   color: $color-white;
+
+  @include iftablet {
+    font-size: rem(28px);
+  }
+
+  @include iflaptop {
+    font-size: rem(40px);
+  }
+
+  @include ifdesktop {
+    font-size: rem(48px);
+  }
 }
\ No newline at end of file
diff --git a/src/widgets/breadcrumbs/ui.tsx b/src/widgets/breadcrumbs/ui.tsx
index 27681f7..5316a39 100644
--- a/src/widgets/breadcrumbs/ui.tsx
+++ b/src/widgets/breadcrumbs/ui.tsx
@@ -27,7 +27,12 @@ function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) {
           <h2 className={s.Header}>{breadcrumbs[1].name}</h2>
         </div>
         <div className={s.Advertise}>
-          <Image src={sberImg} alt={'Сбербанк, Дом-клик'} width={400} />
+          <Image
+            className={s.Image}
+            src={sberImg}
+            alt={'Сбербанк, Дом-клик'}
+            width={400}
+          />
           <p className={s.Description}>Аккредитованая оценочная компания</p>
         </div>
       </div>