fix: add width container

src/views/home/ui/contacts/contacts.module.scss

@@ -1,165 +1,170 @@
 .Contacts {
   background: $color-lightgray;
   border-radius: rem(28px);
-  padding: rem(160px);
+  padding: rem(160px) 0;
+}
 
-  .Header {
+.InnerContainer {
-    font-family: $font-open-sans;
+  margin: 0 auto;
-    font-weight: $font-semi-bold;
+  width: rem(1340px);
-    font-size: rem(60px);
+}
-    line-height: 100%;
-    color: $color-text;
-    margin-bottom: rem(80px);
-  }
 
-  .Clients {
+.Header {
-    margin: 0 auto;
+  font-family: $font-open-sans;
-    display: flex;
+  font-weight: $font-semi-bold;
-    flex-direction: row;
+  font-size: rem(60px);
-    flex-wrap: wrap;
+  line-height: 100%;
-    justify-content: space-around;
+  color: $color-text;
-    align-items: center;
+  margin-bottom: rem(80px);
-    gap: rem(40px);
+}
-    max-width: rem(1200px);
-    margin-bottom: rem(160px);
 
-    .Client {
+.Clients {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+  gap: rem(40px);
+  max-width: rem(1200px);
+  margin-bottom: rem(160px);
 
-      img {
+  .Client {
-        width: rem(300px);
+
-        height: auto;
+    img {
-      }
+      width: rem(300px);
+      height: auto;
     }
   }
+}
 
-  .Form {
+.Form {
-    position: relative;
+  position: relative;
-    background: #292E3D;
+  background: #292E3D;
+  display: flex;
+  flex-direction: row;
+  padding: rem(60px) rem(50px);
+  border-radius: rem(28px);
+  overflow: hidden;
+
+  margin-bottom: rem(80px);
+
+  &:after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    background-color: rgba(#163055, .6);
+    transition: 250ms background-color;
+  }
+
+  .Background {
+    position: absolute;
+    object-fit: cover;
+    z-index: 1;
+  }
+
+  .Offer {
+    flex: 2;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
-    padding: rem(60px) rem(50px);
-    border-radius: rem(28px);
-    overflow: hidden;
 
-    margin-bottom: rem(80px);
+    .Title {
-
-    &:after {
-      content: '';
-      display: block;
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      z-index: 1;
-      left: 0;
-      top: 0;
-      background-color: rgba(#163055, .6);
-      transition: 250ms background-color;
-    }
-
-    .Background {
-      position: absolute;
-      object-fit: cover;
-      z-index: 1;
-    }
-
-    .Offer {
-      flex: 2;
-      display: flex;
-      flex-direction: column;
-
-      .Title {
-        position: relative;
-        z-index: 2;
-        font-family: $font-open-sans;
-        font-weight: $font-semi-bold;
-        font-size: rem(48px);
-        line-height: 100%;
-        color: $color-white;
-        margin-bottom: rem(80px);
-      }
-
-      .SubTitle {
-        position: relative;
-        z-index: 2;
-        font-family: $font-open-sans;
-        font-weight: $font-light;
-        font-size: rem(32px);
-        line-height: 100%;
-        color: $color-white;
-        max-width: rem(720px);
-      }
-    }
-
-    .Inputs {
       position: relative;
       z-index: 2;
-      flex: 1;
+      font-family: $font-open-sans;
-      display: flex;
+      font-weight: $font-semi-bold;
-      flex-direction: column;
+      font-size: rem(48px);
-      justify-content: center;
+      line-height: 100%;
-      gap: rem(20px);
+      color: $color-white;
-    }
+      margin-bottom: rem(80px);
-  }
-
-  .Map {
-    position: relative;
-
-    iframe {
-      border-radius: rem(28px);
     }
 
-    .Contacts {
+    .SubTitle {
-      position: absolute;
+      position: relative;
       z-index: 2;
-      top: rem(-40px);
+      font-family: $font-open-sans;
-      right: rem(180px);
+      font-weight: $font-light;
-      border-radius: rem(28px);
+      font-size: rem(32px);
-      background: $color-white;
+      line-height: 100%;
-      width: rem(440px);
+      color: $color-white;
-      padding: rem(40px) rem(35px) rem(20px);
+      max-width: rem(720px);
+    }
+  }
 
-      display: flex;
+  .Inputs {
-      flex-direction: column;
+    position: relative;
-      justify-content: flex-start;
+    z-index: 2;
-      align-items: flex-start;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: rem(20px);
+  }
+}
 
-      .Title {
+.Map {
-        position: relative;
+  position: relative;
-        font-family: $font-open-sans;
-        font-weight: $font-semi-bold;
-        font-size: rem(48px);
-        line-height: 100%;
-        color: $color-text;
-        text-align: right;
-        margin-bottom: rem(32px);
-        align-self: center;
 
-        .LedOn {
+  iframe {
-          position: absolute;
+    border-radius: rem(28px);
-          bottom: rem(6px);
+  }
-          left: rem(6px);
+
-        }
+  .Contacts {
+    position: absolute;
+    z-index: 2;
+    top: rem(-40px);
+    right: rem(180px);
+    border-radius: rem(28px);
+    background: $color-white;
+    width: rem(440px);
+    padding: rem(40px) rem(35px) rem(20px);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    .Title {
+      position: relative;
+      font-family: $font-open-sans;
+      font-weight: $font-semi-bold;
+      font-size: rem(48px);
+      line-height: 100%;
+      color: $color-text;
+      text-align: right;
+      margin-bottom: rem(32px);
+      align-self: center;
+
+      .LedOn {
+        position: absolute;
+        bottom: rem(6px);
+        left: rem(6px);
       }
+    }
 
-      .Address {
+    .Address {
-        position: relative;
+      position: relative;
-        font-family: $font-open-sans;
+      font-family: $font-open-sans;
-        font-weight: $font-regular;
+      font-weight: $font-regular;
-        font-size: rem(32px);
+      font-size: rem(32px);
-        line-height: 130%;
+      line-height: 130%;
-        color: $color-text;
+      color: $color-text;
-        margin-bottom: rem(20px);
+      margin-bottom: rem(20px);
-        margin-left: rem(32px);
+      margin-left: rem(32px);
 
-        .Icon {
+      .Icon {
-          position: absolute;
+        position: absolute;
-          left: rem(-48px);
+        left: rem(-48px);
-          top: rem(8px);
+        top: rem(8px);
-          width: rem(32px);
+        width: rem(32px);
-          height: rem(32px);
+        height: rem(32px);
-          stroke: #E96526;
+        stroke: #E96526;
-        }
       }
     }
   }
-}
+}

src/views/home/ui/contacts/contacts.tsx

@@ -16,72 +16,74 @@ import email from '@public/svg/email.svg';
 export default function Contacts() {
   return (
     <section className={s.Contacts}>
-      <h2 className={s.Header}>
+      <div className={s.InnerContainer}>
-        Клиенты, которые <Mark>нам доверяют</Mark>
+        <h2 className={s.Header}>
-      </h2>
+          Клиенты, которые <Mark>нам доверяют</Mark>
-      <div className={s.Clients}>
+        </h2>
-        {clientsLogos.map(({ logo }, idx) => (
+        <div className={s.Clients}>
-          <div key={idx} className={s.Client}>
+          {clientsLogos.map(({ logo }, idx) => (
-            <Image src={logo} alt='' />
+            <div key={idx} className={s.Client}>
+              <Image src={logo} alt='' />
+            </div>
+          ))}
+        </div>
+
+        <div className={s.Form}>
+          <Image
+            className={s.Background}
+            src={bgForm}
+            placeholder='blur'
+            alt={''}
+            quality={75}
+            fill
+            priority
+          />
+          <div className={s.Offer}>
+            <h3 className={s.Title}>Остались вопросы?</h3>
+            <p className={s.SubTitle}>
+              Наш эксперт свяжется с вами для уточнения подробностей и
+              определения точной стоимости работ
+            </p>
+          </div>
+          <div className={s.Inputs}>
+            <Input placeholder='Ваше имя' fullWidth />
+            <Input type='text' placeholder='+79991234567' fullWidth />
+            <Button variant='orange' fullWidth>
+              Получить консультацию
+            </Button>
           </div>
-        ))}
-      </div>
-
-      <div className={s.Form}>
-        <Image
-          className={s.Background}
-          src={bgForm}
-          placeholder='blur'
-          alt={''}
-          quality={75}
-          fill
-          priority
-        />
-        <div className={s.Offer}>
-          <h3 className={s.Title}>Остались вопросы?</h3>
-          <p className={s.SubTitle}>
-            Наш эксперт свяжется с вами для уточнения подробностей и определения
-            точной стоимости работ
-          </p>
         </div>
-        <div className={s.Inputs}>
-          <Input placeholder='Ваше имя' fullWidth />
-          <Input type='text' placeholder='+79991234567' fullWidth />
-          <Button variant='orange' fullWidth>
-            Получить консультацию
-          </Button>
-        </div>
-      </div>
 
-      <div className={s.Map}>
+        <div className={s.Map}>
-        <iframe
+          <iframe
-          src='https://yandex.ru/map-widget/v1/?um=constructor%3A7f1285c4f3e470bc9affa220323655ac72edd1be376c2579d421ca359ac46a7d&amp;source=constructor'
+            src='https://yandex.ru/map-widget/v1/?um=constructor%3A7f1285c4f3e470bc9affa220323655ac72edd1be376c2579d421ca359ac46a7d&amp;source=constructor'
-          width='100%'
+            width='100%'
-          height='620'
+            height='620'
-          frameBorder='0'
+            frameBorder='0'
-        ></iframe>
+          ></iframe>
 
-        <div className={s.Contacts}>
+          <div className={s.Contacts}>
-          <h3 className={s.Title}>
+            <h3 className={s.Title}>
-            <Image className={s.LedOn} src={ledOn} alt={''} />
+              <Image className={s.LedOn} src={ledOn} alt={''} />
-            Мы <Mark>всегда</Mark> <br /> на связи
+              Мы <Mark>всегда</Mark> <br /> на связи
-          </h3>
+            </h3>
-          <p className={s.Address}>
+            <p className={s.Address}>
-            <Image className={s.Icon} src={map} alt='' />
+              <Image className={s.Icon} src={map} alt='' />
-            Краснодарский край <br />
+              Краснодарский край <br />
-            г.Сочи <br />
+              г.Сочи <br />
-            ТЦ «Атриум» <br />
+              ТЦ «Атриум» <br />
-            ул. Навагинская д.9«Д» <br />
+              ул. Навагинская д.9«Д» <br />
-            этаж 3, офис 35
+              этаж 3, офис 35
-          </p>
+            </p>
-          <p className={s.Address}>
+            <p className={s.Address}>
-            <Image className={s.Icon} src={phoneCall} alt='' />
+              <Image className={s.Icon} src={phoneCall} alt='' />
-            +7 (988) 400 93 93
+              +7 (988) 400 93 93
-          </p>
+            </p>
-          <p className={s.Address}>
+            <p className={s.Address}>
-            <Image className={s.Icon} src={email} alt='' />
+              <Image className={s.Icon} src={email} alt='' />
-            office@firecheck.ru
+              office@firecheck.ru
-          </p>
+            </p>
+          </div>
         </div>
       </div>
     </section>

src/views/home/ui/footer/footer.module.scss

@@ -1,49 +1,57 @@
 .Footer {
+  position: relative;
   background-color: #1B1B25;
-  padding: rem(80px) rem(160px);
+  padding: rem(120px) 0 rem(40px);
+  margin-top: rem(-24px);
+  z-index: -1;
+}
+
+.InnerContainer {
+  margin: 0 auto;
+  width: rem(1340px);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: rem(20px);
+}
 
-  .Block {
+.Block {
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    gap: rem(20px);
+  gap: rem(20px);
-    max-width: 40vw;
+  max-width: 40vw;
-  }
+}
 
-  .SendBtn {
+.SendBtn {
-    align-self: flex-end;
+  align-self: flex-end;
-    max-width: 33%;
+  max-width: 33%;
-  }
+}
 
-  .Header {
+.Header {
+  font-family: $font-open-sans;
+  font-weight: $font-semi-bold;
+  font-size: rem(60px);
+  line-height: 100%;
+  color: $color-white;
+  margin-bottom: rem(40px);
+}
+
+.Bottom {
+  width: 100%;
+  height: rem(80px);
+  border-top: 1px solid $color-white;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: rem(20px);
+
+  .Policy {
     font-family: $font-open-sans;
-    font-weight: $font-semi-bold;
+    font-weight: $font-regular;
-    font-size: rem(60px);
+    font-size: rem(16px);
     line-height: 100%;
     color: $color-white;
-    margin-bottom: rem(40px);
+    margin-left: auto;
   }
-
+}
-  .Bottom {
-    width: 100%;
-    height: rem(80px);
-    border-top: 1px solid $color-white;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: rem(20px);
-
-    .Policy {
-      font-family: $font-open-sans;
-      font-weight: $font-regular;
-      font-size: rem(16px);
-      line-height: 100%;
-      color: $color-white;
-      margin-left: auto;
-    }
-  }
-}

src/views/home/ui/footer/footer.tsx

@@ -5,31 +5,33 @@ import Link from 'next/link';
 export default function Footer() {
   return (
     <section className={s.Footer}>
-      <div className={s.Block}>
+      <div className={s.InnerContainer}>
-        <h2 className={s.Header}>
+        <div className={s.Block}>
-          Давайте <Mark>обсудим</Mark> ваши задачи
+          <h2 className={s.Header}>
-        </h2>
+            Давайте <Mark>обсудим</Mark> ваши задачи
-        <Input variant='ghost' placeholder={'Ваше имя'} fullWidth />
+          </h2>
-        <Input variant='ghost' placeholder={'+7 999 1234567'} fullWidth />
+          <Input variant='ghost' placeholder={'Ваше имя'} fullWidth />
-        <TextArea
+          <Input variant='ghost' placeholder={'+7 999 1234567'} fullWidth />
-          variant='ghost'
+          <TextArea
-          placeholder={'Кратко опишите вашу задачу'}
+            variant='ghost'
-          fullWidth
+            placeholder={'Кратко опишите вашу задачу'}
-          id='story'
+            fullWidth
-          name='story'
+            id='story'
-          rows={6}
+            name='story'
-        />
+            rows={6}
-        <Button className={s.SendBtn} variant={'orange'} fullWidth>
+          />
-          Отправить
+          <Button className={s.SendBtn} variant={'orange'} fullWidth>
-        </Button>
+            Отправить
-      </div>
+          </Button>
-      <div className={s.Bottom}>
+        </div>
-        <Button variant='ghost'>Telegram</Button>
+        <div className={s.Bottom}>
-        <Button variant='ghost'>WhatsApp</Button>
+          <Button variant='ghost'>Telegram</Button>
-        <Button variant='ghost'>+7 (999) 123 45 67</Button>
+          <Button variant='ghost'>WhatsApp</Button>
-        <p className={s.Policy}>
+          <Button variant='ghost'>+7 (999) 123 45 67</Button>
-          <Link href='#'>Политика конфиденциальности</Link>
+          <p className={s.Policy}>
-        </p>
+            <Link href='#'>Политика конфиденциальности</Link>
+          </p>
+        </div>
       </div>
     </section>
   );

src/views/home/ui/license/license.module.scss

@@ -1,6 +1,7 @@
 .License {
-  padding: rem(160px);
+  margin: 0 auto;
-
+  width: rem(1340px);
+  padding: rem(120px) 0 rem(160px);
 
   .Header {
     font-family: $font-open-sans;

src/views/home/ui/license/license.tsx

@@ -30,11 +30,11 @@ export default function License() {
             priority
           />
           <h3 className={s.Title}>
-            Заключите договор до 1 июня и получите скидку на проведение пожарной
+            Заключите договор до 1 июля и получите скидку на проведение пожарной
             экспертизы 15 %
           </h3>
           <p className={s.SubTitle}>
-            Оставьте свои контактные данные и мы закрепим скидку до 1 июня за
+            Оставьте свои контактные данные и мы закрепим скидку до 1 июля за
             вами
           </p>
         </div>

src/views/home/ui/main/main.module.scss

@@ -1,5 +1,7 @@
 .Main {
-  padding: 0 rem(160px) 0;
+  margin: 0 auto;
+  width: rem(1340px);
+  //padding: 0 rem(160px) 0;
 
   &_BgWrapper {
     position: absolute;

src/views/home/ui/offer/offer.module.scss

@@ -1,7 +1,67 @@
 .Offer {
   background: $color-lightgray;
   border-radius: rem(28px);
-  padding: rem(160px);
+  padding: rem(160px) 0;
+}
+
+.InnerContainer {
+  margin: 0 auto;
+  width: rem(1340px);
+}
+
+.Title {
+  font-family: $font-open-sans;
+  font-weight: $font-semi-bold;
+  font-size: rem(60px);
+  line-height: 100%;
+  color: $color-text;
+  max-width: rem(1330px);
+  margin-bottom: rem(80px);
+}
+
+.Text {
+  font-family: $font-open-sans;
+  font-weight: $font-regular;
+  font-size: rem(32px);
+  line-height: 100%;
+  color: $color-text;
+  margin-bottom: rem(20px);
+}
+
+.List {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  max-width: rem(1330px);
+  margin-bottom: rem(60px);
+
+  .ListItem {
+    font-family: $font-open-sans;
+    font-weight: $font-regular;
+    font-size: rem(32px);
+    line-height: 160%;
+    color: $color-text;
+    list-style-type: decimal;
+    margin-left: rem(40px);
+  }
+}
+
+.RowForm {
+  display: flex;
+  flex-direction: row;
+  gap: rem(40px);
+  justify-content: center;
+  margin-bottom: rem(80px);
+}
+
+.Inner {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: $color-white;
+  border-radius: rem(28px);
+  padding: rem(80px) rem(40px);
+  margin-bottom: rem(130px);
 
   .Title {
     font-family: $font-open-sans;
@@ -9,155 +69,22 @@
     font-size: rem(60px);
     line-height: 100%;
     color: $color-text;
-    max-width: rem(1330px);
-    margin-bottom: rem(80px);
   }
 
-  .Text {
+  .Grid {
-    font-family: $font-open-sans;
+    display: grid;
-    font-weight: $font-regular;
+    grid-template-rows: repeat(2, 1fr);
-    font-size: rem(32px);
+    grid-template-columns: repeat(3, 1fr);
-    line-height: 100%;
-    color: $color-text;
-    margin-bottom: rem(20px);
-  }
-
-  .List {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    max-width: rem(1330px);
-    margin-bottom: rem(60px);
-
-    .ListItem {
-      font-family: $font-open-sans;
-      font-weight: $font-regular;
-      font-size: rem(32px);
-      line-height: 160%;
-      color: $color-text;
-      list-style-type: decimal;
-      margin-left: rem(40px);
-    }
-  }
-
-  .RowForm {
-    display: flex;
-    flex-direction: row;
     gap: rem(40px);
-    justify-content: center;
+    padding: rem(40px) 0;
-    margin-bottom: rem(80px);
   }
 
-  .Inner {
+  .Tile {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    background-color: $color-white;
-    border-radius: rem(28px);
-    padding: rem(80px) rem(40px);
-    margin-bottom: rem(130px);
-
-    .Title {
-      font-family: $font-open-sans;
-      font-weight: $font-semi-bold;
-      font-size: rem(60px);
-      line-height: 100%;
-      color: $color-text;
-    }
-
-    .Grid {
-      display: grid;
-      grid-template-rows: repeat(2, 1fr);
-      grid-template-columns: repeat(3, 1fr);
-      gap: rem(40px);
-      padding: rem(40px) 0;
-    }
-
-    .Tile {
-      position: relative;
-      padding: rem(25px);
-      height: rem(352px);
-      border-radius: rem(28px);
-      overflow: hidden;
-
-      &:after {
-        content: '';
-        display: block;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        z-index: 1;
-        left: 0;
-        top: 0;
-        background-color: rgba(#292E3D, .7);
-        transition: 250ms background-color;
-      }
-
-      &:hover {
-        &:after {
-          background-color: rgba(#292E3D, .5);
-        }
-
-        .Title {
-          display: none;
-        }
-
-        .Description {
-          display: block;
-        }
-
-        .Arrow {
-          transform: rotate(45deg);
-          transition: transform 250ms ease-in-out;
-        }
-      }
-
-      .Background {
-        position: absolute;
-      }
-
-      .Title {
-        position: relative;
-        z-index: 2;
-        font-family: $font-open-sans;
-        font-weight: $font-regular;
-        font-size: rem(42px);
-        line-height: 100%;
-        color: $color-white;
-      }
-
-      .Description {
-        position: relative;
-        z-index: 2;
-        display: none;
-        font-family: $font-open-sans;
-        font-weight: $font-regular;
-        font-size: rem(24px);
-        line-height: 130%;
-        color: $color-white;
-      }
-
-      .Arrow {
-        position: absolute;
-        z-index: 2;
-        right: rem(25px);
-        bottom: rem(25px);
-        width: rem(64px);
-        height: rem(64px);
-        transform: rotate(-135deg);
-        transition: transform 250ms ease-in-out;
-      }
-    }
-  }
-
-  .Form {
     position: relative;
-    padding: rem(40px) rem(60px);
+    padding: rem(25px);
-    background: #292E3D;
+    height: rem(352px);
     border-radius: rem(28px);
     overflow: hidden;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
 
     &:after {
       content: '';
@@ -168,35 +95,31 @@
       z-index: 1;
       left: 0;
       top: 0;
-      background-color: rgba(#163055, .6);
+      background-color: rgba(#292E3D, .7);
       transition: 250ms background-color;
     }
 
+    &:hover {
+      &:after {
+        background-color: rgba(#292E3D, .5);
+      }
+
+      .Title {
+        display: none;
+      }
+
+      .Description {
+        display: block;
+      }
+
+      .Arrow {
+        transform: rotate(45deg);
+        transition: transform 250ms ease-in-out;
+      }
+    }
+
     .Background {
       position: absolute;
-      object-fit: cover;
-      z-index: 1;
-    }
-
-    .PanelLeft {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .PanelRight {
-      width: 100%;
-      place-self: end end;
-    }
-
-    .SubTitle {
-      position: relative;
-      z-index: 2;
-      font-family: $font-open-sans;
-      font-weight: $font-light;
-      font-size: rem(30px);
-      line-height: 100%;
-      color: $color-white;
-      margin-bottom: rem(16px);
     }
 
     .Title {
@@ -204,11 +127,93 @@
       z-index: 2;
       font-family: $font-open-sans;
       font-weight: $font-regular;
-      font-size: rem(48px);
+      font-size: rem(42px);
+      line-height: 100%;
+      color: $color-white;
+    }
+
+    .Description {
+      position: relative;
+      z-index: 2;
+      display: none;
+      font-family: $font-open-sans;
+      font-weight: $font-regular;
+      font-size: rem(24px);
       line-height: 130%;
       color: $color-white;
-      max-width: rem(660px);
+    }
-      margin: 0;
+
+    .Arrow {
+      position: absolute;
+      z-index: 2;
+      right: rem(25px);
+      bottom: rem(25px);
+      width: rem(64px);
+      height: rem(64px);
+      transform: rotate(-135deg);
+      transition: transform 250ms ease-in-out;
     }
   }
-}
+}
+
+.Form {
+  position: relative;
+  padding: rem(40px) rem(60px);
+  background: #292E3D;
+  border-radius: rem(28px);
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+
+  &:after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    background-color: rgba(#163055, .6);
+    transition: 250ms background-color;
+  }
+
+  .Background {
+    position: absolute;
+    object-fit: cover;
+    z-index: 1;
+  }
+
+  .PanelLeft {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .PanelRight {
+    width: 100%;
+    place-self: end end;
+  }
+
+  .SubTitle {
+    position: relative;
+    z-index: 2;
+    font-family: $font-open-sans;
+    font-weight: $font-light;
+    font-size: rem(30px);
+    line-height: 100%;
+    color: $color-white;
+    margin-bottom: rem(16px);
+  }
+
+  .Title {
+    position: relative;
+    z-index: 2;
+    font-family: $font-open-sans;
+    font-weight: $font-regular;
+    font-size: rem(48px);
+    line-height: 130%;
+    color: $color-white;
+    max-width: rem(660px);
+    margin: 0;
+  }
+}

src/views/home/ui/offer/offer.tsx

@@ -19,81 +19,84 @@ export default function Offer() {
 
   return (
     <section className={s.Offer}>
-      <h2 className={s.Title}>
+      <div className={s.InnerContainer}>
-        Помогаем <Mark> выявить недостатки </Mark> и <Mark>привести</Mark>{' '}
-        систему Охранно-Пожарной <br />
-        сигнализации <Mark> в соответствие </Mark> со всеми нормативами
-      </h2>
-      <p className={s.Text}>Методика работы:</p>
-      <ul className={s.List}>
-        <li className={s.ListItem}>
-          Экспертиза (аудит) выявляет нарушения ОПС
-        </li>
-        <li className={s.ListItem}>
-          На основании экспертизы оформляется заключение
-        </li>
-        <li className={s.ListItem}>
-          На основании выявленных нарушений производится устранение недостатков
-        </li>
-        <li className={s.ListItem}>
-          Производится проверка проекта по замене старых пожарных систем на
-          новые, что позволяет сократить стоимость сметы на модернизацию.
-        </li>
-      </ul>
-      <form className={s.RowForm}>
-        <Input type='text' placeholder='+7 (999) 123 45 67' />
-        <Input
-          type='text'
-          placeholder='Ваше имя'
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-        />
-        <Button variant='orange'>Узнать подробности</Button>
-      </form>
-      <div className={s.Inner}>
         <h2 className={s.Title}>
-          Возьмем <Mark>на себя</Mark> все заботы
+          Помогаем <Mark> выявить недостатки </Mark> и <Mark>привести</Mark>{' '}
+          систему Охранно-Пожарной <br />
+          сигнализации <Mark> в соответствие </Mark> со всеми нормативами
         </h2>
-        <div className={s.Grid}>
+        <p className={s.Text}>Методика работы:</p>
-          {tileList.map(({ title, description, image }, idx) => (
+        <ul className={s.List}>
-            <div key={idx} className={s.Tile}>
+          <li className={s.ListItem}>
-              <Image
+            Экспертиза (аудит) выявляет нарушения ОПС
-                className={s.Background}
+          </li>
-                src={image}
+          <li className={s.ListItem}>
-                placeholder='blur'
+            На основании экспертизы оформляется заключение
-                alt={''}
+          </li>
-                quality={75}
+          <li className={s.ListItem}>
-                fill
+            На основании выявленных нарушений производится устранение
-                priority
+            недостатков
-              />
+          </li>
-              <h3 className={s.Title}> {title} </h3>
+          <li className={s.ListItem}>
-              <p className={s.Description}> {description} </p>
+            Производится проверка проекта по замене старых пожарных систем на
-              <Image className={s.Arrow} src={arrow} alt='' />
+            новые, что позволяет сократить стоимость сметы на модернизацию.
-            </div>
+          </li>
-          ))}
+        </ul>
-        </div>
+        <form className={s.RowForm}>
-      </div>
+          <Input type='text' placeholder='+7 (999) 123 45 67' />
-      <div className={s.Form}>
+          <Input
-        <Image
+            type='text'
-          className={s.Background}
+            placeholder='Ваше имя'
-          src={bgForm}
+            value={name}
-          placeholder='blur'
+            onChange={(e) => setName(e.target.value)}
-          alt={''}
-          quality={75}
-          fill
-          priority
-        />
-        <div className={s.PanelLeft}>
-          <p className={s.SubTitle}>Нужна помощь?</p>
-          <h3 className={s.Title}>
-            Оставьте заявку на бесплатную консультацию
-          </h3>
-        </div>
-        <div className={s.PanelRight}>
-          <AdvancedPhoneInput
-            text='Получить консультацию'
-            placeholder={'+7 (999) 123 45 67'}
           />
+          <Button variant='orange'>Узнать подробности</Button>
+        </form>
+        <div className={s.Inner}>
+          <h2 className={s.Title}>
+            Возьмем <Mark>на себя</Mark> все заботы
+          </h2>
+          <div className={s.Grid}>
+            {tileList.map(({ title, description, image }, idx) => (
+              <div key={idx} className={s.Tile}>
+                <Image
+                  className={s.Background}
+                  src={image}
+                  placeholder='blur'
+                  alt={''}
+                  quality={75}
+                  fill
+                  priority
+                />
+                <h3 className={s.Title}> {title} </h3>
+                <p className={s.Description}> {description} </p>
+                <Image className={s.Arrow} src={arrow} alt='' />
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className={s.Form}>
+          <Image
+            className={s.Background}
+            src={bgForm}
+            placeholder='blur'
+            alt={''}
+            quality={75}
+            fill
+            priority
+          />
+          <div className={s.PanelLeft}>
+            <p className={s.SubTitle}>Нужна помощь?</p>
+            <h3 className={s.Title}>
+              Оставьте заявку на бесплатную консультацию
+            </h3>
+          </div>
+          <div className={s.PanelRight}>
+            <AdvancedPhoneInput
+              text='Получить консультацию'
+              placeholder={'+7 (999) 123 45 67'}
+            />
+          </div>
         </div>
       </div>
     </section>

src/views/home/ui/result/result.module.scss

@@ -1,5 +1,7 @@
 .Result {
-  padding: rem(160px);
+  margin: 0 auto;
+  width: rem(1340px);
+  padding: rem(160px) 0 rem(80px);
 
   .Header {
     font-family: $font-open-sans;
@@ -15,7 +17,7 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    gap: 10vw;
+    gap: rem(48px);
     margin-bottom: rem(80px);
 
     &:nth-child(odd) {