diff --git a/source/catalog.html b/source/catalog.html
index 62d54cb..b736858 100644
--- a/source/catalog.html
+++ b/source/catalog.html
@@ -11,6 +11,8 @@
   <link rel="apple-touch-icon" href="favicons/180.png">
   <link rel="manifest" href="manifest.webmanifest">
   <script src="scripts/index.js" defer></script>
+  <link rel="preload" href="fonts/lato/Lato-Regular.woff2" as="font" crossorigin="anonymous">
+  <link rel="preload" href="fonts/oswald/oswaldregular.woff2" as="font" crossorigin="anonymous">
 </head>
 
 <body class="page__body nojs">
@@ -25,7 +27,7 @@
           </picture>
         </a>
         <a class="header__logo-text logo " href="index.html" aria-current="page">
-          <img class="logo__image" src="images/logo-text.svg" width="101" height="18" alt="Логотип cat energy надписью">
+          <img class="logo__image logo__image--text" src="images/logo-text.svg" width="101" height="18" alt="Логотип cat energy надписью">
         </a>
         <button class="header__toggle button-toggle button-toggle--closed" type="button" id="button">
           <span class="visually-hidden">Меню</span>
@@ -90,10 +92,10 @@ <h3 class="card__title">Cat Energy PRO 500&nbsp;г</h3>
               <a class="card__link" href="#" tabindex="-1">
                 <picture>
                   <source media="(min-width: 1440px)" srcset="images/product-2-desktop@1x.webp, images/product-2-desktop@2x.webp 2x" width="172" height="196" type="image/webp">
-                  <source media="(min-width: 768px)" srcset="images/product-2-tablet@1x.webp, images/product-2-desktop@2x.webp 2x" width="168" height="206" type="image/webp">
+                  <source media="(min-width: 768px)" srcset="images/product-2-tablet@1x.webp, images/product-2-desktop@2x.webp 2x" width="200" height="206" type="image/webp">
                   <source media="(min-width: 320px)" srcset="images/product-2-moblie@1x.webp, images/product-2-moblie@2x.webp 2x" width="84" height="100" type="image/webp">
                   <source media="(min-width: 1440px)" srcset="images/product-2-desktop@1x.png, images/product-2-desktop@2x.png 2x" width="172" height="196" type="image/png">
-                  <source media="(min-width: 768px)" srcset="images/product-2-tablet@1x.png, images/product-2-tablet@2x.png 2x" width="168" height="206" type="image/png">
+                  <source media="(min-width: 768px)" srcset="images/product-2-tablet@1x.png, images/product-2-tablet@2x.png 2x" width="200" height="206" type="image/png">
                   <img class="card__image" src="images/product-2-mobile@1x.png" srcset="images/product-2-moblie@2x.png 2x" width="84" height="100" alt="Продукт со вкусом курицы 1000 г">
                 </picture>
               </a>
diff --git a/source/icons/arrow-big.svg b/source/icons/arrow-big.svg
new file mode 100644
index 0000000..b25c0b6
--- /dev/null
+++ b/source/icons/arrow-big.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="#000" stroke-width="2" d="M0 6h26"/><path d="m32 6-6.75 5.2v-10.4l6.75 5.2Z" fill="#000"/></svg>
\ No newline at end of file
diff --git a/source/icons/arrow.svg b/source/icons/arrow.svg
deleted file mode 100644
index c5e4ed3..0000000
--- a/source/icons/arrow.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 24 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="#000" stroke-width="2" d="M0 6h18"/><path d="m24 6-6.75 5.2v-10.4l6.75 5.2Z" fill="#000"/></svg>
\ No newline at end of file
diff --git a/source/index.html b/source/index.html
index 0f6de2e..dc5d6d6 100644
--- a/source/index.html
+++ b/source/index.html
@@ -11,6 +11,8 @@
   <link rel="apple-touch-icon" href="favicons/180.png">
   <link rel="manifest" href="manifest.webmanifest">
   <script src="scripts/index.js" defer></script>
+  <link rel="preload" href="fonts/lato/Lato-Regular.woff2" as="font" crossorigin="anonymous">
+  <link rel="preload" href="fonts/oswald/oswaldregular.woff2" as="font" crossorigin="anonymous">
 </head>
 
 <body class="page__body nojs">
@@ -25,7 +27,7 @@
           </picture>
         </a>
         <a class="header__logo-text logo " href="index.html" aria-current="page">
-          <img class="logo__image" src="images/logo-text.svg" width="101" height="18" alt="Логотип cat energy надписью">
+          <img class="logo__image logo__image--text" src="images/logo-text.svg" width="101" height="18" alt="Логотип cat energy надписью">
         </a>
         <button class="header__toggle button-toggle button-toggle--closed" type="button" id="button">
           <span class="visually-hidden">Меню</span>
@@ -50,8 +52,7 @@
   <main class="main">
     <section class="hero">
       <div class="hero__wrapper wrapper">
-        <h1 class="hero__title">Функциональное
-          питание для котов</h1>
+        <h1 class="hero__title">Функциональное<br>питание для котов</h1>
         <p class="hero__subtitle">Занялся собой? Займись котом!</p>
         <div class="hero__image">
           <picture>
@@ -67,19 +68,19 @@ <h1 class="hero__title">Функциональное
       </div>
     </section>
 
-    <section class="programms">
-      <div class="programms__wrapper wrapper">
+    <section class="programs">
+      <div class="programs__wrapper wrapper">
         <h2 class="visually-hidden">Выбор программы</h2>
-        <ul class="programms__list">
-          <li class="programms__item programms__item--slim">
-            <h3 class="programms__title">Похудение</h3>
-            <p class="programms__description">Ваш кот весит больше собаки и почти утратил способность лазить по деревьям? Пора на диету! Cat Energy Slim поможет вашему питомцу сбросить лишний вес.</p>
-            <a class="programms__link" href="#">Каталог Slim</a>
+        <ul class="programs__list">
+          <li class="programs__item programs__item--slim">
+            <h3 class="programs__title">Похудение</h3>
+            <p class="programs__description">Ваш кот весит больше собаки и почти утратил способность лазить по деревьям? Пора на диету! Cat Energy Slim поможет вашему питомцу сбросить лишний вес.</p>
+            <a class="programs__link" href="#">Каталог Slim</a>
           </li>
-          <li class="programms__item programms__item--pro">
-            <h3 class="programms__title">Набор массы</h3>
-            <p class="programms__description">Заработать авторитет среди дворовых котов и даже собак? Серия Cat Energy Pro поможет вашему коту нарастить необходимые мышцы!</p>
-            <a class="programms__link" href="#">Каталог Pro</a>
+          <li class="programs__item programs__item--pro">
+            <h3 class="programs__title">Набор массы</h3>
+            <p class="programs__description">Заработать авторитет среди дворовых котов и даже собак? Серия Cat Energy Pro поможет вашему коту нарастить необходимые мышцы!</p>
+            <a class="programs__link" href="#">Каталог Pro</a>
           </li>
         </ul>
       </div>
@@ -115,20 +116,20 @@ <h2 class="instructions__title">Как это работает</h2>
       <div class="example__wrapper wrapper">
         <h2 class="example__title">Живой пример</h2>
         <p class="example__subtitle">Борис сбросил 5&nbsp;кг за 2 месяца, просто заменив свой обычный корм на Cat Energy Slim. Отличный результат без изнуряющих тренировок! При этом он не менял своих привычек и по-прежнему спит по 16 часов в день.</p>
-        <div class="example__stats-container">
-          <dl class="example__list example__list--weight">
-            <dt class="example__number example__number--weight">5&nbsp;КГ</dt>
-            <dd class="example__description example__description--weight">снижение веса</dd>
-          </dl>
-          <dl class="example__list example__list--time">
-            <dt class="example__number example__number--time">60 ДНЕЙ</dt>
-            <dd class="example__description example__description--time">затрачено времени</dd>
-          </dl>
-          <dl class="example__list example__list--cost">
+        <dl class="example__list">
+          <div class="example__item example__item--weight">
+            <dt class="example__description example__description--weight">Снижение веса</dt>
+            <dd class="example__number example__number--weight">5&nbsp;кг</dd>
+          </div>
+          <div class="example__item example__item--time">
+            <dt class="example__description example__description--time">Затрачено времени</dt>
+            <dd class="example__number example__number--time">60 дней</dd>
+          </div>
+          <div class="example__item example__item--cost">
             <dt class="example__expenses">Затраты на питание:</dt>
-            <dd class="example__total">15 000&nbsp;РУБ.</dd>
-          </dl>
-        </div>
+            <dd class="example__total">15 000&nbsp;руб.</dd>
+          </div>
+        </dl>
         <div class="example__demonstration demonstration">
           <picture>
             <source media="(min-width: 768px)" srcset="images/before-tablet@1x.webp, images/before-tablet@2x.webp 2x" width="560" height="512" type="image/webp">
@@ -153,14 +154,13 @@ <h2 class="example__title">Живой пример</h2>
 
     <section class="location" data-test="contacts">
       <div class="location__wrapper wrapper">
-        <h2 class="location__title">Приглашаем к сотрудничеству дилеров!</h2>
+        <h2 class="location__title">Приглашаем<br>к сотрудничеству<br>дилеров!</h2>
         <address class="location__address">
-          <p class="location__street">ул.&nbsp;Большая
-            Конюшенная, д.&nbsp;19/8</p>
+          <p class="location__street">ул.&nbsp;Большая<br>Конюшенная, д.&nbsp;19/8</p>
           <p class="location__city">Санкт-Петербург</p>
         </address>
       </div>
-      <div class="location-map">
+      <div class="location__map">
         <h2 class="visually-hidden">Карта</h2>
         <div class="location__image-container">
           <picture>
diff --git a/source/styles/blocks/additionals.scss b/source/styles/blocks/additionals.scss
index bcf0827..fe100f9 100644
--- a/source/styles/blocks/additionals.scss
+++ b/source/styles/blocks/additionals.scss
@@ -53,5 +53,6 @@
 
   @media (min-width: $desktop-width) {
     margin: 0;
+    padding: 5px 0;
   }
 }
diff --git a/source/styles/blocks/button.scss b/source/styles/blocks/button.scss
index 4bad76b..13c59f5 100644
--- a/source/styles/blocks/button.scss
+++ b/source/styles/blocks/button.scss
@@ -26,7 +26,7 @@
   }
 
   &:active {
-    color: rgba($base-color-white, 0.3);
+    color: rgba($base-color-white, 0.4);
   }
 }
 
diff --git a/source/styles/blocks/card-more.scss b/source/styles/blocks/card-more.scss
index df3cd17..3a17b91 100644
--- a/source/styles/blocks/card-more.scss
+++ b/source/styles/blocks/card-more.scss
@@ -40,7 +40,7 @@
   }
 
   @media (min-width: $desktop-width) {
-    margin-top: 81px;
+    margin-top: 88px;
     width: 243px;
   }
 }
diff --git a/source/styles/blocks/card.scss b/source/styles/blocks/card.scss
index 839105b..8e0e92a 100644
--- a/source/styles/blocks/card.scss
+++ b/source/styles/blocks/card.scss
@@ -2,6 +2,7 @@
   border-top: 1px solid $decor-color-light;
 
   @media (min-width: $tablet-width) {
+    padding: 0;
     display: flex;
     border-top: none;
   }
@@ -20,7 +21,7 @@
   grid-template-columns: repeat(2, 50%);
   width: 280px;
   margin: 0 auto;
-  padding: 20px 0 25px;
+  padding: 21px 0 25px;
   row-gap: 14px;
 
   @media (min-width: $tablet-width) {
@@ -29,7 +30,7 @@
     display: grid;
     grid-template-columns: 37px 250px 37px;
     grid-template-rows: 69px 150px 1fr max-content min-content 28px;
-    row-gap: 12px;
+    row-gap: 13px;
 
     &::before {
       content: "";
@@ -45,7 +46,7 @@
     width: 245px;
     grid-template-columns: 38px 169px 38px;
     grid-template-rows: 63px 129px 1fr max-content min-content 23px;
-    row-gap: 17px;
+    row-gap: 20px;
   }
 }
 
diff --git a/source/styles/blocks/catalog.scss b/source/styles/blocks/catalog.scss
index 9ef4cfa..8991d91 100644
--- a/source/styles/blocks/catalog.scss
+++ b/source/styles/blocks/catalog.scss
@@ -1,10 +1,10 @@
 .catalog {
   @media (min-width: $tablet-width) {
-    padding: 40px 0 74px;
+    padding: 0;
   }
 
   @media (min-width: $desktop-width) {
-    padding: 45px 0 71px;
+    padding: 0;
   }
 }
 
@@ -29,13 +29,14 @@
   font-weight: $primary-font-weight;
   color: $base-color-text-dark;
   width: 280px;
-  margin: 27px auto 40px;
+  margin: 16px auto 30px;
 
   @media (min-width: $tablet-width) {
     width: unset;
-    margin: 0 0 84px;
+    padding: 40px 0;
     font-size: 60px;
     line-height: 1;
+    margin: 0;
   }
 }
 
@@ -49,9 +50,15 @@
     flex-wrap: wrap;
     gap: 60px;
     margin: 0;
+    padding: 40px 0 71px;
   }
 
   @media (min-width: $desktop-width) {
-    gap: 63px 80px;
+    gap: 55px 80px;
+    padding: 40 0 64px;
   }
 }
+
+.catalog__item {
+  padding: 0;
+}
diff --git a/source/styles/blocks/demonstration.scss b/source/styles/blocks/demonstration.scss
index 3026db0..f922f26 100644
--- a/source/styles/blocks/demonstration.scss
+++ b/source/styles/blocks/demonstration.scss
@@ -9,6 +9,11 @@
   @media (min-width: $tablet-width) {
     margin-inline: auto;
   }
+
+  @media (min-width: $desktop-width) {
+    margin-inline: auto;
+    margin-top: 59px;
+  }
 }
 
 .demonstration__image {
diff --git a/source/styles/blocks/example.scss b/source/styles/blocks/example.scss
index a9fca82..e4b9434 100644
--- a/source/styles/blocks/example.scss
+++ b/source/styles/blocks/example.scss
@@ -22,7 +22,7 @@
 }
 
 .example__wrapper {
-  padding: 25px 0 40px;
+  padding: 15px 0 40px;
 
   @media (min-width: $tablet-width) {
     padding: 45px 0 101px;
@@ -53,13 +53,14 @@
   }
 
   @media (min-width: $desktop-width) {
-    margin: 0 0 76px;
+    margin: 57px 0 76px;
     grid-column: 1 / 2;
   }
 }
 
 .example__subtitle {
-  margin: 0 0 20px;
+  margin: 0;
+  line-height: 1.3;
 
   @media (min-width: $tablet-width) {
     margin: 0 0 55px;
@@ -68,19 +69,22 @@
   }
 
   @media (min-width: $desktop-width) {
-    margin: 70px 0 69px;
+    margin: 70px 0;
     grid-column: 1 / 2;
+    padding: 0 2px;
   }
 }
 
-.example__stats-container {
+.example__list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   column-gap: 32px;
+  margin: 19px 0;
 
   @media (min-width: $tablet-width) {
     display: flex;
     column-gap: 0;
+    margin: 0;
     margin-bottom: 99px;
   }
 
@@ -94,7 +98,7 @@
   }
 }
 
-.example__list {
+.example__item {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -154,6 +158,7 @@
       justify-self: flex-start;
       max-width: 440px;
       margin: 0;
+      gap: 66px;
     }
   }
 }
@@ -168,6 +173,7 @@
   font-weight: 400;
   line-height: 12px;
   order: 1;
+  z-index: 1;
 
   &--weight {
     background-color: $base-color-dark-grey;
@@ -206,6 +212,7 @@
   }
 }
 
+
 .example__number {
   position: relative;
   width: 124px;
@@ -220,6 +227,7 @@
   line-height: 1;
   border: 1px solid $decor-color-dark;
   border-radius: 4px;
+  box-sizing: border-box;
 
   @media (min-width: $tablet-width) {
     width: 162px;
diff --git a/source/styles/blocks/form.scss b/source/styles/blocks/form.scss
index adf57ca..8c6ea67 100644
--- a/source/styles/blocks/form.scss
+++ b/source/styles/blocks/form.scss
@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   row-gap: 16px;
+  box-sizing: border-box;
 
   @media (min-width: $tablet-width) {
     width: 632px;
@@ -19,11 +20,12 @@
   font-family: $secondary-font;
   font-size: 20px;
   line-height: 1.5;
+  height: 56px;
   font-weight: $primary-font-weight;
   text-transform: uppercase;
   color: $base-color-text;
   padding: 12px;
-
+  box-sizing: border-box;
   border: solid 1px $decor-color-medium;
 
   &:hover {
diff --git a/source/styles/blocks/header.scss b/source/styles/blocks/header.scss
index c472718..877520d 100644
--- a/source/styles/blocks/header.scss
+++ b/source/styles/blocks/header.scss
@@ -66,3 +66,10 @@
     margin-right: 0;
   }
 }
+
+.logo__image--text {
+  @media (min-width: $desktop-width) {
+    min-width: 118px;
+    min-height: 21px;
+  }
+}
diff --git a/source/styles/blocks/hero.scss b/source/styles/blocks/hero.scss
index 57fbfcf..8778015 100644
--- a/source/styles/blocks/hero.scss
+++ b/source/styles/blocks/hero.scss
@@ -2,7 +2,12 @@
   font-family: $secondary-font;
   font-weight: $primary-font-weight;
   color: $base-color-white;
-  position: relative;
+  background-image: linear-gradient($accent-transparent 60%, $background-color-grey 60%), image-set("../images/cat-hero-mobile@1x.webp" 1x type("image/webp"), "../images/cat-hero-mobile@2x.webp" 2x type("image/webp")), linear-gradient(to right, #4e4d51 50%, #414045 50%);
+  background-repeat: no-repeat;
+  background-size: contain, 490px 302px, contain;
+  background-position: 50% 0;
+  text-align: center;
+  background-color: $accent-transparent;
 
   @media (min-width: $tablet-width) {
     background-color: $base-color-white;
@@ -14,41 +19,23 @@
   }
 
   @media (min-width: $desktop-width) {
-    padding: 50px 0 80px;
+    margin-bottom: 88px;
   }
 
-  &::before {
-    content: "";
-    position: absolute;
-    z-index: -1;
-    background-image: linear-gradient($accent-transparent, $accent-transparent), url("../../images/cat-hero-mobile@1x.jpg"), $background-color-grey;
-    background-position: 50% 0;
-    background-repeat: no-repeat;
-    background-size: contain, 320px 302px, contain;
-    background-color: $accent-transparent;
-    top: 0;
-    left: 0;
-    height: 302px;
-    width: 100%;
-
-    @media (min-width: $tablet-width) {
-      display: none;
-    }
-
-    @media (min-width: $desktop-width) {
+  @media (min-width: $desktop-width) {
+    &::before {
       content: "";
       position: absolute;
       display: block;
       background-color: $accent-transparent;
-      background-image: linear-gradient($accent-transparent, $accent-transparent), url("../../images/cat-hero-desktop@1x.jpg"), $background-color-grey;
+      background-image: linear-gradient($accent-transparent, $accent-transparent), image-set("../images/cat-hero-desktop@1x.webp" 1x type("image/webp"), "../images/cat-hero-desktop@2x.webp" 2x type("image/webp")), linear-gradient(to right, #403f45, #403f45);
       background-repeat: no-repeat;
-      background-size: auto, 1040px 694px;
       height: 694px;
-      inset: 0;
-      top: -175px;
-      left: 50%;
+      width: 50%;
+      top: 0;
+      right: 0;
       z-index: 0;
-      background-position: 0% 0;
+      margin-left: 720px;
     }
   }
 }
@@ -64,7 +51,7 @@
     display: grid;
     row-gap: 40px;
     margin: 0 auto;
-    padding: 40px 0 0;
+    padding: 13px 0 0;
     grid-template-columns: 90px 420px 198px;
     grid-template-rows: repeat(4, min-content);
     background-image: none;
@@ -73,7 +60,7 @@
   @media (min-width: $desktop-width) {
     padding: 0;
     grid-template-columns: 80px 367px 552px;
-    grid-template-rows: repeat(3, min-content);
+    grid-template-rows: repeat(4, min-content);
   }
 }
 
@@ -97,8 +84,8 @@
   }
 
   @media (min-width: $desktop-width) {
-    padding: 0;
-    grid-area: 1 / 1 / 2 / 3;
+    padding: 0 0 73px;
+    grid-area: 2 / 2 / 3 / 4;
   }
 }
 
@@ -114,7 +101,7 @@
   @media (min-width: $tablet-width) {
     color: $base-color-text-dark;
     font-size: 20px;
-    margin: 0;
+    margin: -31px 0 0;
     padding: 0;
     line-height: 1;
     text-align: start;
@@ -122,7 +109,9 @@
   }
 
   @media (min-width: $desktop-width) {
-    grid-area: 2 / 1 / 2 / 3;
+    grid-area: 2 / 2 / 4 / 2;
+    padding: 0;
+    margin: 0;
   }
 }
 
@@ -131,14 +120,14 @@
   @media (min-width: $tablet-width) {
     height: 609px;
     grid-area: 3 / 1 / 5 / -1;
-    margin-top: -18px;
+    margin-top: -23px;
   }
 
   @media (min-width: $desktop-width) {
     grid-area: 1 / 3 / -1 / 4;
     width: 552px;
     height: 499px;
-    margin-top: -82px;
+    margin-top: 0;
     z-index: 1;
   }
 }
@@ -152,12 +141,13 @@
     padding: 14px;
     width: 244px;
     grid-area: 3 / 2 / 4 / 3;
-    margin-top: 10px;
+    margin-top: 5px;
   }
 
   @media (min-width: $desktop-width) {
     max-width: 420px;
-    grid-area: 3 / 1 / 3 / 2;
+    grid-area: 3 / 2 / 3 / 2;
     margin: 0;
+    margin-bottom: 55px;
   }
 }
diff --git a/source/styles/blocks/instructions.scss b/source/styles/blocks/instructions.scss
index 750f64a..ef1a72a 100644
--- a/source/styles/blocks/instructions.scss
+++ b/source/styles/blocks/instructions.scss
@@ -16,13 +16,17 @@
   line-height: 1;
   color: $base-color-text-dark;
   font-weight: $primary-font-weight;
-  margin: 0 0 40px;
+  margin: 0 0 36px;
   text-align: left;
 
   @media (min-width: $tablet-width) {
     font-size: 60px;
     margin-bottom: 72px;
   }
+
+  @media (min-width: $desktop-width) {
+    margin-bottom: 42px;
+  }
 }
 
 .instructions__list {
@@ -30,12 +34,11 @@
   margin: 0;
   padding: 0;
   display: grid;
-  gap: 20px;
 
   @media (min-width: $tablet-width) {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    gap: 35px 156px;
+    gap: 38px 60px;
   }
 
   @media (min-width: $desktop-width) {
@@ -49,7 +52,7 @@
   position: relative;
   display: grid;
   grid-template-columns: 140 minmax(0, 1fr);
-  grid-template-rows: 70px minmax(0, 1fr);
+  gap: 40px 0;
   margin-left: 0;
   align-items: center;
   counter-increment: counter 1;
@@ -88,7 +91,7 @@
   @media (min-width: $tablet-width) {
     display: grid;
     grid-template-columns: 114px minmax(0, 1fr);
-    grid-template-rows: 140px minmax(0, 1fr);
+    grid-template-rows: 70px minmax(0, 1fr);
     width: 245px;
     min-height: 280px;
 
@@ -122,6 +125,7 @@
   min-width: 200px;
   grid-area: 1 / 1 / 4 / 2;
   margin-left: 80px;
+  line-height: 1.3;
 
   @media (min-width: $tablet-width) {
     font-size: 16px;
@@ -129,6 +133,7 @@
     grid-area: 2 / 1 / 2 / 4;
     line-height: 1.5;
     margin-bottom: 70px;
+    align-self: start;
 
     &::after {
       margin: 0;
diff --git a/source/styles/blocks/location.scss b/source/styles/blocks/location.scss
index 20827dc..97e38d4 100644
--- a/source/styles/blocks/location.scss
+++ b/source/styles/blocks/location.scss
@@ -10,7 +10,7 @@
     min-width: 100%;
     min-height: 400px;
     margin: 0 auto;
-    grid-template-rows: 95px auto 95px;
+    grid-template-rows: 95px 95px 95px 95px;
     grid-template-columns: auto 565px 90px 565px auto;
   }
 }
@@ -24,14 +24,14 @@
 
   @media (min-width: $tablet-width) {
     gap: 25px;
-    padding: 60px 40px;
+    padding: 57px 41px;
   }
 
   @media (min-width: $desktop-width) {
     z-index: 2;
     width: 565px;
     margin: 0 0 10px;
-    padding: 60px 78px 60px 80px;
+    padding: 100px 78px 98px 80px;
     background-color: $base-color-white;
     grid-area: 2 / 2 / 3 / 3;
     column-gap: 92px;
@@ -82,7 +82,7 @@
   margin: 0;
 }
 
-.location-map {
+.location__map {
   position: relative;
   z-index: 0;
   display: grid;
@@ -105,7 +105,7 @@
   grid-area: 1 / 2 / -1 / -3;
 }
 
-.location-map iframe {
+.location__map iframe {
   display: block;
   grid-area: 1 / 1 / -1 / -1;
   width: 100%;
diff --git a/source/styles/blocks/navigation.scss b/source/styles/blocks/navigation.scss
index 26e8ddb..4832a58 100644
--- a/source/styles/blocks/navigation.scss
+++ b/source/styles/blocks/navigation.scss
@@ -44,7 +44,7 @@
   }
 
   &:active {
-    opacity: 0.3;
+    opacity: 0.5;
   }
 
   @media (max-width: 767px) {
diff --git a/source/styles/blocks/product.scss b/source/styles/blocks/product.scss
index 0c9865b..d800b4c 100644
--- a/source/styles/blocks/product.scss
+++ b/source/styles/blocks/product.scss
@@ -26,7 +26,7 @@
     gap: 40px;
     border-right: none;
     border-left: none;
-    padding: 14px 0 17px;
+    padding: 16px 0;
     align-items: center;
   }
 }
diff --git a/source/styles/blocks/programms.scss b/source/styles/blocks/programs.scss
similarity index 52%
rename from source/styles/blocks/programms.scss
rename to source/styles/blocks/programs.scss
index 1588b0b..ed7660b 100644
--- a/source/styles/blocks/programms.scss
+++ b/source/styles/blocks/programs.scss
@@ -1,14 +1,17 @@
-.programms {
-  @media (min-width: $desktop-width) {
-    padding-top: 20px;
+.programs__wrapper {
+  padding-bottom: 20px;
+
+  @media (min-width: $tablet-width) {
+    padding: 0 0 45px;
   }
-}
 
-.programms__wrapper {
-  margin-bottom: 40px;
+  @media (min-width: $desktop-width) {
+    padding-top: 53px;
+    padding-bottom: 71px;
+  }
 }
 
-.programms__list {
+.programs__list {
   margin: 0;
   padding: 0;
   list-style-type: none;
@@ -17,179 +20,175 @@
   gap: 20px;
 
   @media (min-width: $tablet-width) {
-    gap: 80px;
+    gap: 30px;
   }
 
   @media (min-width: $desktop-width) {
     flex-flow: row wrap;
+    gap: 80px;
   }
 }
 
-.programms__item {
+.programs__item {
   background-color: $base-color-light-grey;
   min-height: 266px;
-  position: relative;
-  display: flex;
-  padding: 20px 20px 0;
-  flex-direction: column;
-  gap: 20px;
-
-  @media (min-width: $tablet-width) {
-    min-height: 372px;
-    padding: 50px;
-  }
+  display: grid;
+  padding: 21px 20px 18px;
+  grid-template-columns: 70px 1fr;
+  gap: 19px 0;
 
-  @media (min-width: $desktop-width) {
-    width: 570px;
-    min-height: 374px;
-    flex-wrap: wrap;
-    margin: 0;
-    padding: 50px;
+  &::before {
+    content: "";
+    display: block;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position-x: left;
+    background-position-y: top;
+    width: 67px;
+    height: 53px;
   }
 
   &--slim::before {
-    content: "";
     background-image: url("../../icons/stack.svg#slim-cat");
-    background-repeat: no-repeat;
-    background-size: cover;
     width: 50px;
-    height: 53px;
-    align-self: center;
-    position: absolute;
-    top: 21px;
-    left: 20px;
+  }
 
-    @media (min-width: $tablet-width) {
+  &--pro {
+    padding-top: 24px;
+    padding-bottom: 18px;
+
+    &::before {
+      background-image: url("../../icons/stack.svg#pro-cat");
+      height: 50px;
+      margin-left: -7px;
+    }
+  }
+
+  @media (min-width: $tablet-width) {
+    grid-template-rows: repeat(3, auto);
+    grid-template-columns: 1fr 240px;
+    gap: 24px 10px;
+    padding: 77px 63px 57px 52px;
+
+    &::before {
+      justify-self: end;
+      grid-area: 1 / 2 / -1 / 3;
       width: 200px;
       height: 211px;
-      top: 81px;
-      left: 445px;
     }
 
-    @media (min-width: $desktop-width) {
-      width: 100px;
-      height: 108px;
-      top: 41px;
-      left: 52px;
+    &--pro::before {
+      width: 268px;
+      height: 200px;
+      margin-top: 14px;
+      margin-right: -34px;
     }
   }
 
-  &--pro::before {
-    content: "";
-    position: absolute;
-    background-image: url("../../icons/stack.svg#pro-cat");
-    background-repeat: no-repeat;
-    background-size: cover;
-    width: 67px;
-    height: 50px;
-    align-self: center;
-    top: 24px;
-    left: 13px;
+  @media (min-width: $desktop-width) {
+    max-width: 570px;
+    grid-template-columns: 152px 1fr;
+    gap: 27px 10px;
+    padding: 41px 52px 59px;
 
-    @media (min-width: $tablet-width) {
-      width: 268px;
-      height: 200px;
-      top: 91px;
-      left: 411px;
+    &::before {
+      width: 100px;
+      height: 106px;
+      justify-self: flex-start;
+      grid-area: 1 / 1 / 2 / 2;
     }
 
-    @media (min-width: $desktop-width) {
+    &--pro::before {
       width: 134px;
       height: 100px;
-      top: 47px;
-      left: 33px;
+      margin-left: -18px;
+      margin-top: 4px;
+      margin-right: 0;
     }
   }
 }
 
-.programms__title {
+.programs__title {
   color: $base-color-text-dark;
   font-family: $secondary-font;
   font-size: 24px;
   text-transform: uppercase;
   font-weight: inherit;
-  display: flex;
+  align-self: center;
   line-height: 1.5;
   margin: 0;
-  margin-left: 72px;
-  padding-top: 10px;
 
   @media (min-width: $tablet-width) {
-    justify-content: flex-start;
     font-size: 36px;
     line-height: 1;
-    padding: 25px 0;
-    margin: 0;
-  }
-
-  @media (min-width: $desktop-width) {
-    padding-left: 162px;
   }
 }
 
-.programms__description {
+.programs__description {
   margin: 0;
+  grid-column: 1 / -1;
   line-height: 1.3;
-  min-width: 227px;
-  border-bottom: 1px solid #d9d9d9;
-  padding: 15px 0 20px;
+  border-bottom: 1px solid $decor-color;
+  padding-bottom: 20px;
 
   @media (min-width: $tablet-width) {
     font-size: 16px;
     line-height: 1.5;
-    padding: 0 0 24px;
-    max-width: 340px;
-    border: none;
+    padding: 0;
+    grid-area: unset;
     color: $base-color-text-dark;
+    border: none;
+    margin-bottom: 29px;
   }
 
   @media (min-width: $desktop-width) {
-    padding: 38px 0 0;
-    max-width: 460px;
+    margin: 0;
+    padding-top: 7;
+    grid-column: 1 / -1;
   }
 }
 
-.programms__link {
+.programs__link {
   display: flex;
+  grid-column: 1 / -1;
+  align-items: center;
+  gap: 15px;
   font-family: $secondary-font;
   font-size: 16px;
   color: $base-color-text-dark;
   text-transform: uppercase;
   line-height: 1;
-  text-align: start;
-  width: 161px;
-  padding: 4px;
+  text-decoration: none;
+  padding-bottom: 3px;
 
   @media (min-width: $tablet-width) {
-    display: flex;
-    border: none;
     font-size: 20px;
     line-height: 1.3;
     justify-self: start;
-    text-align: left;
-    width: 170px;
+    grid-area: unset;
+    gap: 4px;
   }
 
   @media (min-width: $desktop-width) {
-    padding: 0;
+    padding-top: 0;
+    grid-column: 1 / -1;
+    gap: 25px;
   }
 
   &::after {
     content: "";
-    width: 32px;
+    min-width: 32px;
     height: 12px;
-    background-image: url("../../icons/stack.svg#arrow");
+    background-image: url("../../icons/stack.svg#arrow-big");
     background-repeat: no-repeat;
     background-position-x: -8px;
-    align-self: center;
-    margin-left: 16px;
 
     @media (min-width: $tablet-width) {
       margin-left: 23px;
     }
 
     @media (min-width: $desktop-width) {
-      margin-left: 25px;
+      margin-left: 0;
     }
   }
 
diff --git a/source/styles/blocks/promo.scss b/source/styles/blocks/promo.scss
index 95a4763..5d37424 100644
--- a/source/styles/blocks/promo.scss
+++ b/source/styles/blocks/promo.scss
@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 58px 20px 43px;
+  padding: 64px 20px 43px;
   color: $base-color-white;
   text-align: center;
 
@@ -62,7 +62,7 @@
 
   @media (min-width: $tablet-width) {
     grid-row: 1 / -1;
-    margin: 5px 27px 0;
+    margin: 10px 0 0;
   }
 
   @media (min-width: $desktop-width) {
diff --git a/source/styles/blocks/subscription.scss b/source/styles/blocks/subscription.scss
index f9ec0d4..9aaf2d9 100644
--- a/source/styles/blocks/subscription.scss
+++ b/source/styles/blocks/subscription.scss
@@ -35,11 +35,13 @@
   text-align: center;
   color: $base-color-text-dark;
   font-family: $secondary-font;
+  margin: 23px 0;
 
   @media (min-width: $tablet-width) {
     padding: 0 38px;
     font-size: 24px;
     line-height: 1.3;
+    margin: 0 0 28px;
   }
 
   @media (min-width: $desktop-width) {
diff --git a/source/styles/blocks/title-lines.scss b/source/styles/blocks/title-lines.scss
index ea311a9..6903695 100644
--- a/source/styles/blocks/title-lines.scss
+++ b/source/styles/blocks/title-lines.scss
@@ -33,6 +33,7 @@
 
   @media (min-width: $desktop-width) {
     font-size: 40px;
+    margin: 0 0 71px;
 
     &::before {
       top: 18px;
diff --git a/source/styles/styles.scss b/source/styles/styles.scss
index cef1edd..baba044 100644
--- a/source/styles/styles.scss
+++ b/source/styles/styles.scss
@@ -16,7 +16,7 @@
 @import "./blocks/button-toggle.scss";
 @import "./blocks/main.scss";
 @import "./blocks/hero.scss";
-@import "./blocks/programms.scss";
+@import "./blocks/programs.scss";
 @import "./blocks/instructions.scss";
 @import "./blocks/example.scss";
 @import "./blocks/demonstration.scss";
