diff --git a/source/catalog.html b/source/catalog.html
index c031d43..629025a 100644
--- a/source/catalog.html
+++ b/source/catalog.html
@@ -4,33 +4,36 @@
   <meta charset="UTF-8">
   <title>Cat Energy</title>
   <link rel="stylesheet" href="css/style.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body class="page__body">
   <header class="site-header">
     <a class="site-header__link" href="index.html">
-      <img class="site-header__link--logo" src="img/logo.svg" width="202" height="59"
+      <img class="site-header__image" src="img/logo.svg" width="202" height="59"
       alt="Логотип «Кэт Энерджи»">
     </a>
     <nav class="site-header__navigation">
-      <button class="site-header__toggle visually-hidden" type="button"><span>Открыть меню</span></button>
-      <div class="site-header__wrapper">
-        <ul class="site-header__list">
-          <li class="site-header__item">
-            <a class="site-header__link" href="index.html">
-              Главная
-            </a>
-          </li>
-          <li class="site-header__item site-header__item--current">
-            <a class="site-header__link" href="#">
-              Каталог продукции
-            </a>
-          </li>
-          <li class="site-header__item">
-            <a class="site-header__link" href="form.html">
-              Подбор программы
-            </a>
-          </li>
-        </ul>
+      <button class="main-header__toggle" type="button">
+        <span class="visually-hidden">Открыть меню</span>
+        <img class="site-header__image" src="img/header-toogle.svg" width="24" height="24">
+      </button>
+      <ul class="site-header__list">
+        <li class="site-header__item">
+          <a class="site-header__link" href="index.html">
+            Главная
+          </a>
+        </li>
+        <li class="site-header__item site-header__item--current">
+          <a class="site-header__link" href="#">
+            Каталог продукции
+          </a>
+        </li>
+        <li class="site-header__item">
+          <a class="site-header__link" href="form.html">
+            Подбор программы
+          </a>
+        </li>
+      </ul>
     </nav>
   </header>
 
@@ -40,262 +43,290 @@
         <h1 class="products__title">
           Каталог продукции
         </h1>
-        <ul class="products__list">
-          <li class="products__item product">
-            <a class="product__link" href="#">
-              <img class="product__image" src="img/little-chicken.png" width="161" height="172" alt="Маленький корм cо вкусом курицы">
-              <h3 class="product__name">
-                Cat Energy Pro 500 г
-              </h3>
-            </a>
-            <ul class="product__description">
-              <li class="product__item">
-                <span class="product__category">
-                  Масса
-                </span>
-                <span class="product__value">
-                  500 г
-                </span>
-              </li>
-              <li class="product__item">
-                <span class="product__category">
-                  Вкус
-                </span>
-                <span class="product__value">
-                  Курица
-                </span>
-              </li>
-              <li class="product__item">
-                <span class="product__category">
-                  Цена
-                </span>
-                <span class="product__value">
-                  700 ₽
-                </span>
-              </li>
-            </ul>
+          <ul class="products__list">
+              <li class="products__item product">
+                <div class="product__card">
+                  <a class="product__link" href="#">
+                    <img class="product__image" src="img/little-chicken.png" width="161" height="172" alt="Маленький корм cо вкусом курицы">
+                  </a>
+                  <ul class="product__description">
+                    <li class="product__item">
+                      <h3 class="product__name">
+                        Cat Energy Pro 500 г
+                      </h3>
+                    </li>
+                    <li class="product__item">
+                      <span class="product__category">
+                        Масса
+                      </span>
+                      <span class="product__value">
+                        500 г
+                      </span>
+                    </li>
+                    <li class="product__item">
+                      <span class="product__category">
+                        Вкус
+                      </span>
+                      <span class="product__value">
+                        Курица
+                      </span>
+                    </li>
+                    <li class="product__item">
+                      <span class="product__category">
+                        Цена
+                      </span>
+                      <span class="product__value">
+                        700 ₽
+                      </span>
+                    </li>
+                  </ul>
+                </div>
             <a class="product__button" href="#">
               Заказать
             </a>
           </li>
           <li class="products__item product">
-            <a class="product__link" href="#">
-              <img class="product__image" src="img/big-chicken.png" width="172" height="196" alt="Большой корм со вкусом курицы">
-              <h3 class="product__name">
-                Cat Energy Pro 1000 г
-              </h3>
-            </a>
-            <ul class="product__description">
-              <li class="product__item">
-                <span class="product__category">
-                  Масса
-                </span>
-                <span class="product__value">
-                  1000 г
-                </span>
-              </li>
-              <li class="product__item">
-                <span class="product__category">
-                  Вкус
-                </span>
-                <span class="product__value">
-                  Курица
-                </span>
-              </li>
-              <li class="product__item">
-                <span class="product__category">
-                  Цена
-                </span>
-                <span class="product__value">
-                  1000 ₽
-                </span>
-              </li>
-            </ul>
+            <div class="product__card">
+              <a class="product__link" href="#">
+                <img class="product__image" src="img/big-chicken.png" width="172" height="196" alt="Большой корм со вкусом курицы">
+              </a>
+              <ul class="product__description">
+                <li class="product__item">
+                  <h3 class="product__name">
+                    Cat Energy Pro 1000 г
+                  </h3>
+                </li>
+                <li class="product__item">
+                  <span class="product__category">
+                    Масса
+                  </span>
+                  <span class="product__value">
+                    1000 г
+                  </span>
+                </li>
+                <li class="product__item">
+                  <span class="product__category">
+                    Вкус
+                  </span>
+                  <span class="product__value">
+                    Курица
+                  </span>
+                </li>
+                <li class="product__item">
+                  <span class="product__category">
+                    Цена
+                  </span>
+                  <span class="product__value">
+                    1000 ₽
+                  </span>
+                </li>
+              </ul>
+            </div>
             <a class="product__button" href="#">
               Заказать
             </a>
           </li>
           <li class="products__item product">
-            <a class="product__link" href="#">
-              <img class="product__image" src="img/little-fish.png" width="163" height="174" alt="Маленький корм со вкусом рыбы">
-              <h3 class="product__name">
-                Cat Energy Pro 500 г
-              </h3>
-            </a>
-            <ul class="product__description">
-              <li class="product__item">
-                <span class="product__category">
-                  Масса
-                </span>
-                <span class="product__value">
-                  500 г
-                </span>
-              </li>
-              <li class="product__item">
-                <span class="product__category">
-                  Вкус
-                </span>
-                <span class="product__value">
-                  Рыба
-                </span>
-              </li>
-              <li class="product__item">
-                <span class="product__category">
-                  Цена
-                </span>
-                <span class="product__value">
-                  700 ₽
-                </span>
-              </li>
-            </ul>
+            <div class="product__card">
+              <a class="product__link" href="#">
+                <img class="product__image" src="img/little-fish.png" width="163" height="174" alt="Маленький корм со вкусом рыбы">
+              </a>
+              <ul class="product__description">
+                <li class="product__item">
+                  <h3 class="product__name">
+                    Cat Energy Pro 500 г
+                  </h3>
+                </li>
+                <li class="product__item">
+                  <span class="product__category">
+                    Масса
+                  </span>
+                  <span class="product__value">
+                    500 г
+                  </span>
+                </li>
+                <li class="product__item">
+                  <span class="product__category">
+                    Вкус
+                  </span>
+                  <span class="product__value">
+                    Рыба
+                  </span>
+                </li>
+                <li class="product__item">
+                  <span class="product__category">
+                    Цена
+                  </span>
+                  <span class="product__value">
+                    700 ₽
+                  </span>
+                </li>
+              </ul>
+            </div>
             <a class="product__button" href="#">
               Заказать
             </a>
           </li>
           <li class="products__item product">
-            <a class="product__link" href="#">
-              <img class="product__image" src="img/little-fish.png" width="172" height="196" alt="Большой корм со вкусом рыбы">
-              <h3 class="product__name">
-                Cat Energy Pro 1000 г
-              </h3>
-            </a>
-            <ul class="product__description">
-              <li class="product__item">
-                <span class="product__category">
-                  Масса
-                </span>
-                <span class="product__value">
-                  1000 г
-                </span>
-              </li>
-              <li class="product__item">
-                <span class="product__category">
-                  Вкус
-                </span>
-                <span class="product__value">
-                  Рыба
-                </span>
-              </li>
-              <li class="product__item">
-                <span class="product__category">
-                  Цена
-                </span>
-                <span class="product__value">
-                  1000 ₽
-                </span>
-              </li>
-            </ul>
+            <div class="product__card">
+              <a class="product__link" href="#">
+                <img class="product__image" src="img/little-fish.png" width="172" height="196" alt="Большой корм со вкусом рыбы">
+              </a>
+              <ul class="product__description">
+                <li class="product__item">
+                  <h3 class="product__name">
+                    Cat Energy Pro 1000 г
+                  </h3>
+                </li>
+                <li class="product__item">
+                  <span class="product__category">
+                    Масса
+                  </span>
+                  <span class="product__value">
+                    1000 г
+                  </span>
+                </li>
+                <li class="product__item">
+                  <span class="product__category">
+                    Вкус
+                  </span>
+                  <span class="product__value">
+                    Рыба
+                  </span>
+                </li>
+                <li class="product__item">
+                  <span class="product__category">
+                    Цена
+                  </span>
+                  <span class="product__value">
+                    1000 ₽
+                  </span>
+                </li>
+              </ul>
+            </div>
             <a class="product__button" href="#">
               Заказать
             </a>
           </li>
           <li class="products__item product">
-            <a class="product__link" href="#">
-              <img class="product__image" src="img/little-buckwheat.png" width="161" height="171" alt="Маленький корм со вкусом гречки">
-              <h3 class="product__name">
-                Cat Energy Slim 500 г
-              </h3>
-            </a>
-            <ul class="product__description">
-              <li class="product__item">
-                <span class="product__category">
-                  Масса
-                </span>
-                <span class="product__value">
-                  500 г
-                </span>
-              </li>
-              <li class="product__item">
-                <span class="product__category">
-                  Вкус
-                </span>
-                <span class="product__value">
-                  Гречка
-                </span>
-              </li>
-              <li class="product__item">
-                <span class="product__category">
-                  Цена
-                </span>
-                <span class="product__value">
-                  400 ₽
-                </span>
-              </li>
-            </ul>
+            <div class="product__card">
+              <a class="product__link" href="#">
+                <img class="product__image" src="img/little-buckwheat.png" width="161" height="171" alt="Маленький корм со вкусом гречки">
+              </a>
+              <ul class="product__description">
+                <li class="product__item">
+                  <h3 class="product__name">
+                    Cat Energy Slim 500 г
+                  </h3>
+                </li>
+                <li class="product__item">
+                  <span class="product__category">
+                    Масса
+                  </span>
+                  <span class="product__value">
+                    500 г
+                  </span>
+                </li>
+                <li class="product__item">
+                  <span class="product__category">
+                    Вкус
+                  </span>
+                  <span class="product__value">
+                    Гречка
+                  </span>
+                </li>
+                <li class="product__item">
+                  <span class="product__category">
+                    Цена
+                  </span>
+                  <span class="product__value">
+                    400 ₽
+                  </span>
+                </li>
+              </ul>
+            </div>
             <a class="product__button" href="#">
               Заказать
             </a>
           </li>
           <li class="products__item product">
-            <a class="product__link" href="#">
-              <img class="product__image" src="img/big-buckwheat.png" width="172" height="196" alt="Большой корм со вкусом гречки">
-              <h3 class="product__name">
-                Cat Energy Slim 1000 г
-              </h3>
-            </a>
-            <ul class="product__description">
-              <li class="product__item">
-                <span class="product__category">
-                  Масса
-                </span>
-                <span class="product__value">
-                  1000 г
-                </span>
-              </li>
-              <li class="product__item">
-                <span class="product__category">
-                  Вкус
-                </span>
-                <span class="product__value">
-                  Гречка
-                </span>
-              </li>
-              <li class="product__item">
-                <span class="product__category">
-                  Цена
-                </span>
-                <span class="product__value">
-                  700 ₽
-                </span>
-              </li>
-            </ul>
+            <div class="product__card">
+              <a class="product__link" href="#">
+                <img class="product__image" src="img/big-buckwheat.png" width="172" height="196" alt="Большой корм со вкусом гречки">
+              </a>
+              <ul class="product__description">
+                <li class="product__item">
+                  <h3 class="product__name">
+                    Cat Energy Pro 1000 г
+                  </h3>
+                </li>
+                <li class="product__item">
+                  <span class="product__category">
+                    Масса
+                  </span>
+                  <span class="product__value">
+                    1000 г
+                  </span>
+                </li>
+                <li class="product__item">
+                  <span class="product__category">
+                    Вкус
+                  </span>
+                  <span class="product__value">
+                    Гречка
+                  </span>
+                </li>
+                <li class="product__item">
+                  <span class="product__category">
+                    Цена
+                  </span>
+                  <span class="product__value">
+                    700 ₽
+                  </span>
+                </li>
+              </ul>
+            </div>
             <a class="product__button" href="#">
               Заказать
             </a>
           </li>
           <li class="products__item product">
-            <a class="product__link" href="#">
-              <img class="product__image" src="img/little-rice.png" width="163" height="174" alt="Маленький корм со вкусом риса">
-              <h3 class="product__name">
-                Cat Energy Slim 500 г
-              </h3>
-            </a>
-            <ul class="product__description">
-              <li class="product__item">
-                <span class="product__category">
-                  Масса
-                </span>
-                <span class="product__value">
-                  500 г
-                </span>
-              </li>
-              <li class="product__item">
-                <span class="product__category">
-                  Вкус
-                </span>
-                <span class="product__value">
-                  Рис
-                </span>
-              </li>
-              <li class="product__item">
-                <span class="product__category">
-                  Цена
-                </span>
-                <span class="product__value">
-                  500 ₽
-                </span>
-              </li>
-            </ul>
+            <div class="product__card">
+              <a class="product__link" href="#">
+                <img class="product__image" src="img/little-rice.png" width="163" height="174" alt="Маленький корм со вкусом риса">
+              </a>
+              <ul class="product__description">
+                <li class="product__item">
+                  <h3 class="product__name">
+                    Cat Energy Slim 500 г
+                  </h3>
+                </li>
+                <li class="product__item">
+                  <span class="product__category">
+                    Масса
+                  </span>
+                  <span class="product__value">
+                    500 г
+                  </span>
+                </li>
+                <li class="product__item">
+                  <span class="product__category">
+                    Вкус
+                  </span>
+                  <span class="product__value">
+                    Рис
+                  </span>
+                </li>
+                <li class="product__item">
+                  <span class="product__category">
+                    Цена
+                  </span>
+                  <span class="product__value">
+                    500 ₽
+                  </span>
+                </li>
+              </ul>
+            </div>
             <a class="product__button" href="#">
               Заказать
             </a>
@@ -324,56 +355,72 @@ <h2 class="extra__title">
         <div class="extra__table">
           <ul class="extra__list">
             <li class="extra__item">
-              <h3 class="extra__item--name">
-                Сахарозаменитель
-              </h3>
-              <p class="extra__item--amount">
-                1 упаковка (100 г)
-              </p>
-              <p class="extra__item--price">
-                200 ₽
-              </p>
-              <a class="extra__item--button" href="#">
+              <div class="extra__total">
+                <h3 class="extra__name">
+                  Сахарозаменитель
+                </h3>
+                <div class="extra__card">
+                  <p class="extra__amount">
+                    1 упаковка (100 г)
+                  </p>
+                  <p class="extra__price">
+                    200 ₽
+                  </p>
+                </div>
+              </div>
+              <a class="extra__button" href="#">
                 Заказать
               </a>
             </li>
             <li class="extra__item">
-              <h3 class="extra__item--name">
-                Питьевая вода
-              </h3>
-              <p class="extra__item--amount">
-                5 литров
-              </p>
-              <p class="extra__item--price">
-                50 ₽
-              </p>
-              <a class="extra__item--button" href="#">
+              <div class="extra__total">
+                <h3 class="extra__name">
+                  Питьевая вода
+                </h3>
+                <div class="extra__card">
+                  <p class="extra__amount">
+                    5 литров
+                  </p>
+                  <p class="extra__price">
+                    50 ₽
+                  </p>
+                </div>
+              </div>
+              <a class="extra__button" href="#">
                 Заказать
               </a>
             <li class="extra__item">
-              <h3 class="extra__item--name">
-                Молоко
-              </h3>
-              <p class="extra__item--amount">
-                1 литр
-              </p>
-              <p class="extra__item--price">
-                100 ₽
-              </p>
-              <a class="extra__item--button" href="#">
+              <div class="extra__total">
+                <h3 class="extra__name">
+                  Молоко
+                </h3>
+                <div class="extra__card">
+                  <p class="extra__amount">
+                    1 литр
+                  </p>
+                  <p class="extra__price">
+                    100 ₽
+                  </p>
+                </div>
+              </div>
+              <a class="extra__button" href="#">
                 Заказать
               </a>
             <li class="extra__item">
-              <h3 class="extra__item--name">
-                Витамины
-              </h3>
-              <p class="extra__item--amount">
-                1 упаковка (30 г)
-              </p>
-              <p class="extra__item--price">
-                300 ₽
-              </p>
-              <a class="extra__item--button" href="#">
+              <div class="extra__total">
+                <h3 class="extra__name">
+                  Витамины
+                </h3>
+                <div class="extra__card">
+                  <p class="extra__amount">
+                    1 упаковка (30 г)
+                  </p>
+                  <p class="extra__price">
+                    300 ₽
+                  </p>
+                </div>
+              </div>
+              <a class="extra__button" href="#">
                 Заказать
               </a>
             </li>
@@ -396,14 +443,15 @@ <h3 class="extra__item--name">
             Приглашаем к&nbsp;сотрудничеству дилеров!
           </p>
           <div class="map__description">
-            <p class="map__description--address">
+            <p class="map__address">
               ул. Большая Конюшенная,д.&nbsp;19/8
             </p>
-            <span class="map__description--city">
+            <span class="map__city">
               Санкт-Петербург
             </span>
           </div>
         </address>
+        <img class="map__image" src="img/map-mobile.jpg" width="320" height="362" alt="">
       </div>
     </section>
   </main>
@@ -436,10 +484,13 @@ <h3 class="extra__item--name">
       </div>
       <div class="main-footer__copyright copyright">
         <a class="copyright__link" href="https://htmlacademy.ru">
-          <img class="copyright__image" src="img/html-academy.svg" width="168" height="37">
+          HTML Academy
+        </a>
+        <a class="copyright__link-image" href="https://htmlacademy.ru">
+          <img class="copyright__image" src="img/copyright.svg" width="27" height="34">
         </a>
       </div>
     </div>
   </footer>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/source/form.html b/source/form.html
index 345e61f..e6364c2 100644
--- a/source/form.html
+++ b/source/form.html
@@ -4,33 +4,36 @@
   <meta charset="UTF-8">
   <title>Cat Energy</title>
   <link rel="stylesheet" href="css/style.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body class="page__body">
   <header class="site-header">
     <a class="site-header__link" href="index.html">
-      <img class="site-header__link--logo" src="img/logo.svg" width="202" height="59"
+      <img class="site-header__image" src="img/logo.svg" width="202" height="59"
       alt="Логотип «Кэт Энерджи»">
     </a>
     <nav class="site-header__navigation">
-      <button class="site-header__toggle visually-hidden" type="button"><span>Открыть меню</span></button>
-      <div class="site-header__wrapper">
-        <ul class="site-header__list">
-          <li class="site-header__item">
-            <a class="site-header__link" href="index.html">
-              Главная
-            </a>
-          </li>
-          <li class="site-header__item">
-            <a class="site-header__link" href="catalog.html">
-              Каталог продукции
-            </a>
-          </li>
-          <li class="site-header__item site-header__item--current">
-            <a class="site-header__link" href="#">
-              Подбор программы
-            </a>
-          </li>
-        </ul>
+      <button class="main-header__toggle" type="button">
+        <span class="visually-hidden">Открыть меню</span>
+        <img class="site-header__image" src="img/header-toogle.svg" width="24" height="24">
+      </button>
+      <ul class="site-header__list">
+        <li class="site-header__item">
+          <a class="site-header__link" href="index.html">
+            Главная
+          </a>
+        </li>
+        <li class="site-header__item">
+          <a class="site-header__link" href="catalog.html">
+            Каталог продукции
+          </a>
+        </li>
+        <li class="site-header__item site-header__item--current">
+          <a class="site-header__link" href="#">
+            Подбор программы
+          </a>
+        </li>
+      </ul>
     </nav>
   </header>
 
@@ -48,11 +51,11 @@ <h1 class="form__title">Подбор программы</h1>
                   <input class="input-block__field" id="form__phone" name="form__phone" placeholder="Барсик">
                 </li>
                 <li class="form__item input-block">
-                  <label class="input-block__label" for="form__weight">Вес (кг):*</label>
+                  <label class="input-block__label" for="form__weight">Вес&nbsp;(кг):*</label>
                   <input class="input-block__field" id="form__weight" name="form__weight" placeholder="7">
                 </li>
                 <li class="form__item input-block">
-                  <label class="input-block__label" for="form__age">Возраст (лет):*</label>
+                  <label class="input-block__label" for="form__age">Возраст&nbsp;(лет):*</label>
                   <input class="input-block__field" id="form__age" name="form__age" placeholder="7">
                 </li>
               </ul>
@@ -61,7 +64,7 @@ <h1 class="form__title">Подбор программы</h1>
               <ul class="form__list">
                 <li class="form__item radio-block">
                   <label class="radio-block__control">
-                  <input class="radio-block__input" type="radio" name="food__program" value="slimming">
+                  <input class="radio-block__input" type="radio" name="food__program" value="slimming" checked>
                   <span class="radio-block__label">Похудение</span>
                 </label>
                 </li>
@@ -104,7 +107,7 @@ <h2 class="contacts__title">Контактные данные (владельц
       <div class="comment__wrapper">
         <h2 class="comment__title">Комментарий</h2>
         <label class="visually-hidden" for="comment__message"></label>
-        <textarea class="comment__message--field field" id="comment-message" name="commment-message" placeholder="Расскажите обо всех повадках кота" required></textarea>
+        <textarea class="comment__message" id="comment-message" name="commment-message" placeholder="Расскажите обо всех повадках кота" required></textarea>
       </div>
     </section>
 
@@ -151,14 +154,15 @@ <h2 class="additionally__title">Дополнительно</h2>
             Приглашаем к&nbsp;сотрудничеству дилеров!
           </p>
           <div class="map__description">
-            <p class="map__description--address">
+            <p class="map__address">
               ул. Большая Конюшенная,д.&nbsp;19/8
             </p>
-            <span class="map__description--city">
+            <span class="map__city">
               Санкт-Петербург
             </span>
           </div>
         </address>
+        <img class="map__image" src="img/map-mobile.jpg" width="320" height="362" alt="">
       </div>
     </section>
   </main>
@@ -191,10 +195,13 @@ <h2 class="additionally__title">Дополнительно</h2>
       </div>
       <div class="main-footer__copyright copyright">
         <a class="copyright__link" href="https://htmlacademy.ru">
-          <img class="copyright__image" src="img/html-academy.svg" width="168" height="37">
+          HTML Academy
+        </a>
+        <a class="copyright__link-image" href="https://htmlacademy.ru">
+          <img class="copyright__image" src="img/copyright.svg" width="27" height="34">
         </a>
       </div>
     </div>
   </footer>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/source/img/copyright.svg b/source/img/copyright.svg
new file mode 100644
index 0000000..bf33ea6
--- /dev/null
+++ b/source/img/copyright.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="27" height="34" fill="none" viewBox="0 0 27 34"><g clip-path="url(#a)"><path fill="#666" d="M13.643.016 13.5 0 0 1.407v24.606L13.5 34 27 26.013V1.407L13.643.016Zm11.591 25L13.5 31.956 1.766 25.015V14.93l11.685 6.916.02 1.253-8.017-4.743-.011 1.225 8.046 4.809.02 1.286-8.045-4.758-.01 1.226L13.5 26.95l8.124-4.833V16.91l3.62-2.15-.01 10.256Zm0-11.564-3.22 1.88-1.482.875-7.065-4.187-.011 1.225 6.04 3.573-.053.031-.13.076-.86.492-4.986-2.948-.011 1.225 3.936 2.328-.933.61-.021.012-2.971-1.742-.011 1.225 1.947 1.135-1.988 1.186-11.618-6.872 11.638-6.958 11.8 6.834Zm0-1.225L13.44 5.31 1.766 12.22V2.99L13.5 1.764 25.234 2.99v9.237Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h27v34H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/source/img/header-toogle.svg b/source/img/header-toogle.svg
new file mode 100644
index 0000000..91d8f92
--- /dev/null
+++ b/source/img/header-toogle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="#000" stroke-width="2" d="M0 3h24M0 11h24M0 19h24"/></svg>
\ No newline at end of file
diff --git a/source/img/map-mobile.jpg b/source/img/map-mobile.jpg
new file mode 100644
index 0000000..03e5ca7
Binary files /dev/null and b/source/img/map-mobile.jpg differ
diff --git a/source/index.html b/source/index.html
index ca03788..ae09277 100644
--- a/source/index.html
+++ b/source/index.html
@@ -4,54 +4,54 @@
   <meta charset="UTF-8">
   <title>Cat Energy</title>
   <link rel="stylesheet" href="css/style.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body class="page__body">
   <header class="main-header">
     <a class="main-header__link" href="index.html">
-      <img class="main-header__link--logo" src="img/logo.svg" width="202" height="59"
+      <img class="main-header__logo" src="img/logo.svg" width="202" height="59"
       alt="Логотип «Кэт Энерджи»">
     </a>
     <nav class="main-header__navigation">
-      <button class="main-header__toggle visually-hidden" type="button"><span>Открыть меню</span></button>
-      <div class="main-header__wrapper">
-        <ul class="main-header__list">
-          <li class="main-header__item main-header__item--current">
-            <a class="main-header__link" href="#">
-              Главная
-            </a>
-          </li>
-          <li class="main-header__item">
-            <a class="main-header__link" href="catalog.html">
-              Каталог продукции
-            </a>
-          </li>
-          <li class="main-header__item">
-            <a class="main-header__link" href="form.html">
-              Подбор программы
-            </a>
-          </li>
-        </ul>
+      <button class="main-header__toggle" type="button">
+        <span class="visually-hidden">Открыть меню</span>
+        <img class="main-header__image" src="img/header-toogle.svg" width="24" height="24">
+      </button>
+      <ul class="main-header__list">
+        <li class="main-header__item main-header__item--current">
+          <a class="main-header__link" href="#">
+            Главная
+          </a>
+        </li>
+        <li class="main-header__item">
+          <a class="main-header__link" href="catalog.html">
+            Каталог продукции
+          </a>
+        </li>
+        <li class="main-header__item">
+          <a class="main-header__link" href="form.html">
+            Подбор программы
+          </a>
+        </li>
+      </ul>
     </nav>
   </header>
 
   <main class="main-container">
-
-    <h1 class="visually-hidden">Кэт Энерджи - функциональное питание для котов.</h1>
-
     <section class="program">
       <div class="program__wrapper">
         <header class="program__header">
-          <h2 class="program__title">
+          <h1 class="program__title">
             Функциональное питание&nbsp;для&nbsp;котов
-          </h2>
+          </h1>
           <p class="program__slogan">
             Занялся собой? Займись котом!
           </p>
-          <a class="program__toggle" href="#">
-            Подобрать программу
-          </a>
         </header>
-        <img class="program__image" src="img/program-image.png" width="552" height="499" alt="Упаковка корма cо вкусом курицы">
+        <img class="program__image" src="img/program-image.png" width="280" height="270" alt="Упаковка корма cо вкусом курицы">
+        <a class="program__toggle" href="#">
+          Подобрать программу
+        </a>
       </div>
     </section>
 
@@ -61,9 +61,9 @@ <h2 class="visually-hidden">
           Программы питания, которые подойдут Вашему питомцу.
         </h2>
         <ul class="food__list">
-          <li class="food__item food__item--slimming">
+          <li class="food__item">
             <h3 class="food__title">
-              <img class="food__image" src="img/food-slimming.svg" width="100" height="106" alt="Иконка стройной кошки">
+              <img class="food__image-slimming" src="img/food-slimming.svg" width="100" height="106" alt="Иконка стройной кошки">
               Похудение
             </h3>
             <p class="food__description">
@@ -74,9 +74,9 @@ <h3 class="food__title">
               <img class="food__link" src="img/food-black-arrow.svg" width="24" height="12">
             </a>
           </li>
-          <li class="food__item food__item--weight">
+          <li class="food__item">
             <h3 class="food__title">
-              <img class="food__image" src="img/food-weight.svg" width="134" height="100" alt="Иконка мускулистой кошки">
+              <img class="food__image-weight" src="img/food-weight.svg" width="134" height="100" alt="Иконка мускулистой кошки">
               Набор массы
             </h3>
             <p class="food__description">
@@ -137,26 +137,28 @@ <h2 class="example__title">
           <p class="example__description">
             Борис сбросил 5 кг за 2 месяца, просто заменив свой обычный корм на Cat Energy Slim. Отличный результат без изнуряющих тренировок! При этом он не менял своих привычек и по-прежнему спит по 16 часов в день.
           </p>
-          <div class="example__tables">
-            <div class="example__result">
-              <p class="example__result--title">5 кг</p>
-              <span class="example__result--description">снижение веса</span>
+          <div class="example__total">
+            <div class="example__tables">
+              <div class="example__result">
+                <p class="example__value">5 кг</p>
+                <span class="example__expenses">снижение веса</span>
+              </div>
+              <div class="example__result">
+                <p class="example__value">60 дней</p>
+                <span class="example__expenses">затрачено времени</span>
+              </div>
             </div>
-            <div class="example__result">
-              <p class="example__result--title">60 дней</p>
-              <span class="example__result--description">затрачено времени</span>
+            <div class="example__costs">
+              <p class="example__food">
+                Затраты на питание:
+              </p>
+              <p class="example__price">
+                15 000 руб.
+              </p>
             </div>
           </div>
-          <div class="example__costs">
-            <p class="example__costs--food">
-              Затраты на питание:
-            </p>
-            <p class="example__costs--price">
-              15 000 руб.
-            </p>
-          </div>
         </div>
-        <img class="example__image" src="img/example-cat.png" width="560" height="512" alt="">
+        <img class="example__image" src="img/example-cat.png" width="280" height="256" alt="">
       </div>
     </section>
 
@@ -167,14 +169,15 @@ <h2 class="example__title">
             Приглашаем к&nbsp;сотрудничеству дилеров!
           </p>
           <div class="map__description">
-            <p class="map__description--address">
+            <p class="map__address">
               ул. Большая Конюшенная,д.&nbsp;19/8
             </p>
-            <span class="map__description--city">
+            <span class="map__city">
               Санкт-Петербург
             </span>
           </div>
         </address>
+        <img class="map__image" src="img/map-mobile.jpg" width="320" height="362" alt="">
       </div>
     </section>
   </main>
@@ -207,10 +210,13 @@ <h2 class="example__title">
       </div>
       <div class="main-footer__copyright copyright">
         <a class="copyright__link" href="https://htmlacademy.ru">
-          <img class="copyright__image" src="img/html-academy.svg" width="168" height="37">
+          HTML Academy
+        </a>
+        <a class="copyright__link-image" href="https://htmlacademy.ru">
+          <img class="copyright__image" src="img/copyright.svg" width="27" height="34">
         </a>
       </div>
     </div>
   </footer>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/source/less/blocks/additionally.less b/source/less/blocks/additionally.less
index d3bd69b..933a923 100644
--- a/source/less/blocks/additionally.less
+++ b/source/less/blocks/additionally.less
@@ -1,57 +1,184 @@
 .additionally__wrapper {
-  margin: 0 110px 79px 110px;
+  margin: 0 20px 32px 20px;
 }
 
 .additionally__title {
   font-family: Oswald;
-  font-size: 36px;
+  font-size: 24px;
   font-weight: 400;
-  line-height: 36px;
+  line-height: 26px;
   margin: 0;
   padding: 0;
-  margin-bottom: 57px;
+  margin-bottom: 34px;
 }
 
 .additionally__list {
-  display: grid;
-  grid-template-columns: 325px 325px 325px 325px;
   margin: 0;
   padding: 0;
   list-style-type: none;
-  margin-bottom: 60px;
+  margin-bottom: 34px;
 }
 
 .checkbox-block__label {
   font-family: Oswald;
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 400;
-  line-height: 30px;
+  line-height: 18px;
   text-transform: uppercase;
 }
 
-.additionally__submit {
-  display: flex;
-}
-
 .additionally__button {
-width:570px;
-padding: 14px 188px 14px 188px;
-background: #68B738;
-font-family: Oswald;
-font-size: 20px;
-font-weight: 400;
-line-height: 26px;
-text-align: center;
-color: #FFFFFF;
-text-transform: uppercase;
-border: none;
-cursor: pointer;
-margin-right: 80px;
+  display: block;
+  text-decoration: none;
+  font-family: Oswald;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  text-align: center;
+  color: #FFFFFF;
+  padding: 10px 0px 10px 0px;
+  background: #68B738;
+  width: 280px;
+  margin: 0 auto;
+  text-transform: uppercase;
+  border: none;
+  margin-bottom: 21px;
 }
 
 .additionally__important {
+  display: flex;
+  justify-content: center;
   font-family: Lato;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 400;
   line-height: 16px;
 }
+
+@media (min-width: @tabletop-width) {
+
+  .additionally__wrapper {
+    margin: 0 30px 60px 30px;
+  }
+
+  .additionally__title {
+    font-family: Oswald;
+    font-size: 36px;
+    font-weight: 400;
+    line-height: 36px;
+    margin: 0;
+    padding: 0;
+    margin-bottom: 57px;
+  }
+
+  .additionally__list {
+    display: grid;
+    grid-template-columns: 344px 284px;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    margin-bottom: 60px;
+  }
+
+  .additionally__item {
+    margin-bottom: 32px;
+  }
+
+  .checkbox-block__label {
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 30px;
+    text-transform: uppercase;
+  }
+
+  .additionally__submit {
+    display: flex;
+  }
+
+  .additionally__button {
+  width: 284px;
+  padding: 14px 65px;
+  background: #68B738;
+  font-family: Oswald;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 26px;
+  text-align: center;
+  color: #FFFFFF;
+  text-transform: uppercase;
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  margin-right: 60px;
+  }
+
+  .additionally__important {
+    font-family: Lato;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+
+}
+
+@media (min-width: @desktop-width) {
+
+  .additionally__wrapper {
+    margin: 0 110px 79px 110px;
+  }
+
+  .additionally__title {
+    font-family: Oswald;
+    font-size: 36px;
+    font-weight: 400;
+    line-height: 36px;
+    margin: 0;
+    padding: 0;
+    margin-bottom: 57px;
+  }
+
+  .additionally__list {
+    display: grid;
+    grid-template-columns: 325px 325px 325px 325px;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    margin-bottom: 60px;
+  }
+
+  .checkbox-block__label {
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 30px;
+    text-transform: uppercase;
+  }
+
+  .additionally__submit {
+    display: flex;
+  }
+
+  .additionally__button {
+  width:570px;
+  padding: 14px 188px 14px 188px;
+  background: #68B738;
+  font-family: Oswald;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 26px;
+  text-align: center;
+  color: #FFFFFF;
+  text-transform: uppercase;
+  border: none;
+  cursor: pointer;
+  margin-right: 80px;
+  }
+
+  .additionally__important {
+    font-family: Lato;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+
+}
\ No newline at end of file
diff --git a/source/less/blocks/comment.less b/source/less/blocks/comment.less
index b69a6df..cabd681 100644
--- a/source/less/blocks/comment.less
+++ b/source/less/blocks/comment.less
@@ -1,21 +1,74 @@
 .comment__wrapper {
-  margin: 0 110px 70px 110px;
+  margin: 0 20px 23px 20px;
 }
 
 .comment__title {
   font-family: Oswald;
-  font-size: 36px;
+  font-size: 24px;
   font-weight: 400;
-  line-height: 36px;
+  line-height: 26px;
 }
 
-.comment__message--field {
-  width: 1220px;
-  height: 175px;
+.comment__message {
+  width: 280px;
+  height: 150px;
   resize: none;
   font-family: Oswald;
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 400;
-  line-height: 30px;
+  line-height: 18px;
   color: #444444;
 }
+
+@media (min-width: @tabletop-width) {
+
+  .comment__wrapper {
+    margin: 0 30px 65px 30px;
+  }
+
+  .comment__title {
+    font-family: Oswald;
+    font-size: 36px;
+    font-weight: 400;
+    line-height: 36px;
+    margin-bottom: 87px;
+  }
+
+  .comment__message {
+    width: 628px;
+    height: 175px;
+    resize: none;
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 30px;
+    color: #444444;
+  }
+
+}
+
+@media (min-width: @desktop-width) {
+
+  .comment__wrapper {
+    margin: 0 110px 70px 110px;
+  }
+
+  .comment__title {
+    font-family: Oswald;
+    font-size: 36px;
+    font-weight: 400;
+    line-height: 36px;
+  }
+
+  .comment__message {
+    width: 1220px;
+    height: 175px;
+    resize: none;
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 30px;
+    color: #444444;
+  }
+
+}
\ No newline at end of file
diff --git a/source/less/blocks/contacts.less b/source/less/blocks/contacts.less
index 2930b82..1fba97d 100644
--- a/source/less/blocks/contacts.less
+++ b/source/less/blocks/contacts.less
@@ -1,16 +1,16 @@
 .contacts__wrapper {
-  margin: 0 110px 0 110px;
+  margin: 0 20px 24px 20px;
 }
 
 .contacts__title {
   font-family: Oswald;
-  font-size: 36px;
+  font-size: 24px;
   font-weight: 400;
-  line-height: 36px;
+  line-height: 26px;
+  margin-bottom: 35px;
 }
 
 .contacts__list {
-  display: flex;
   margin: 0;
   padding: 0;
   justify-content: space-between;
@@ -18,6 +18,69 @@
 
 .contacts__item {
   display: flex;
-  width: 569px;
+  width: 280px;
   align-items: center;
+  margin-bottom: 14px;
+}
+
+.contacts__item:last-child {
+  margin-bottom: 0;
+}
+
+@media (min-width: @tabletop-width) {
+
+  .contacts__wrapper {
+    margin: 0 30px 65px 30px;
+  }
+
+  .contacts__title {
+    font-family: Oswald;
+    font-size: 36px;
+    font-weight: 400;
+    line-height: 36px;
+    margin: 0;
+    margin-bottom: 76px;
+  }
+
+  .contacts__list {
+    display: block;
+    margin: 0;
+    padding: 0;
+  }
+
+  .contacts__item {
+    display: flex;
+    width: 628px;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+
 }
+
+@media (min-width: @desktop-width) {
+
+  .contacts__wrapper {
+    margin: 0 110px 0 110px;
+  }
+
+  .contacts__title {
+    font-family: Oswald;
+    font-size: 36px;
+    font-weight: 400;
+    line-height: 36px;
+  }
+
+  .contacts__list {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    justify-content: space-between;
+  }
+
+  .contacts__item {
+    display: flex;
+    width: 569px;
+    align-items: center;
+  }
+
+}
\ No newline at end of file
diff --git a/source/less/blocks/example.less b/source/less/blocks/example.less
index e76f348..a1b295e 100644
--- a/source/less/blocks/example.less
+++ b/source/less/blocks/example.less
@@ -1,49 +1,152 @@
 .example {
   position: relative;
+  background-color: #F2F2F2;
 }
 
 .example__title {
   font-family: Oswald;
-  font-size: 60px;
+  font-size: 36px;
   font-weight: 400;
-  line-height: 60px;
-  margin: 0 0 76px 110px;
+  line-height: 40px;
+  margin: 0;
+  padding: 0;
+  padding: 25px 0 0 20px;
 }
 
 .example__wrapper {
-  display: flex;
   background-color: #F2F2F2;
 }
 
 .example__sample {
-  margin: 70px 224px 54px 110px;
+  margin: 40px 20px 0 20px;
 }
 
 .example__description {
   margin: 0;
   padding: 0;
-  width: 436px;
-  min-height: 96px;
+  width: 280px;
+  min-height: 108px;
   font-family: Lato;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 400;
-  line-height: 24px;
-  margin-bottom: 69px;
+  line-height: 18px;
+  margin-bottom: 20px;
 }
 
 .example__tables {
   display: flex;
-  margin-bottom: 23px;
+  margin-bottom: 20px;
 }
 
 .example__result {
-  width: 162px;
-  min-height: 72px;
-  gap: 0px;
-  border: 1px 0px 0px 0px;
-  opacity: 0px;
+  width: 124px;
+  min-height: 56px;
   border: 1px solid #CDCDCD;
-  &--title {
+}
+
+.example__value {
+  margin: 0;
+  padding: 0;
+  font-family: Oswald;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: center;
+  margin: 15px 0 18px 0;
+}
+
+.example__expenses {
+  font-family: Lato;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 12px;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+
+.example__costs {
+  display: flex;
+  justify-content: center;
+}
+
+.example__price {
+  font-family: Oswald;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.example__food {
+  font-family: Oswald;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  text-transform: uppercase;
+}
+
+@media (min-width: @tabletop-width) {
+
+  .example {
+    position: relative;
+  }
+
+  .example__title {
+    font-family: Oswald;
+    font-size: 60px;
+    font-weight: 400;
+    line-height: 60px;
+    margin-left: 30px;
+    padding: 0;
+  }
+
+  .example__wrapper {
+    display: flex;
+    flex-direction: column;
+    background-color: #F2F2F2;
+    margin: 0 30px;
+  }
+
+  .example__sample {
+    margin: 0;
+    margin-top: 60px;
+  }
+
+  .example__description {
+    margin: 0;
+    padding: 0;
+    width: 436px;
+    min-height: 96px;
+    font-family: Lato;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    margin-bottom: 55px;
+  }
+
+  .example__total {
+    display: flex;
+    gap: 167px;
+    align-items: center;
+  }
+
+  .example__tables {
+    display: flex;
+    margin-bottom: 23px;
+  }
+
+  .example__result {
+    width: 162px;
+    min-height: 72px;
+    gap: 0px;
+    border: 1px 0px 0px 0px;
+    opacity: 0px;
+    border: 1px solid #CDCDCD;
+  }
+
+  .example__value {
     margin: 0;
     padding: 0;
     font-family: Oswald;
@@ -53,26 +156,125 @@
     text-align: center;
     margin: 15px 0 11px 0;
   }
-  &--description {
+
+  .example__expenses {
     font-family: Lato;
     font-size: 14px;
     font-weight: 400;
     line-height: 14px;
     text-align: center;
   }
-}
 
-.example__costs {
-  display: flex;
-  &--food {
+  .example__costs {
+    display: block;
+  }
+
+  .example__price {
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 20px;
+    text-align: right;
+    text-transform: uppercase;
+    margin: 0;
+    padding: 0;
+  }
+
+  .example__food {
     font-family: Oswald;
     font-size: 20px;
     font-weight: 400;
     line-height: 20px;
-    margin-right: 63px;
     text-transform: uppercase;
+    margin: 0;
+    padding: 0;
   }
-  &--price {
+
+  .example__image {
+    display: block;
+    margin: 0 auto;
+  }
+
+}
+
+@media (min-width: @desktop-width) {
+
+  .example {
+    position: relative;
+  }
+
+  .example__title {
+    font-family: Oswald;
+    font-size: 60px;
+    font-weight: 400;
+    line-height: 60px;
+    margin: 0 0 76px 110px;
+  }
+
+  .example__wrapper {
+    display: flex;
+    background-color: #F2F2F2;
+  }
+
+  .example__sample {
+    margin: 70px 224px 54px 110px;
+  }
+
+  .example__description {
+    margin: 0;
+    padding: 0;
+    width: 436px;
+    min-height: 96px;
+    font-family: Lato;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    margin-bottom: 69px;
+  }
+
+  .example__total {
+    display: block;
+  }
+
+  .example__tables {
+    display: flex;
+    margin-bottom: 23px;
+  }
+
+  .example__result {
+    width: 162px;
+    min-height: 72px;
+    gap: 0px;
+    border: 1px 0px 0px 0px;
+    opacity: 0px;
+    border: 1px solid #CDCDCD;
+  }
+
+  .example__value {
+    margin: 0;
+    padding: 0;
+    font-family: Oswald;
+    font-size: 30px;
+    font-weight: 400;
+    line-height: 37px;
+    text-align: center;
+    margin: 15px 0 11px 0;
+  }
+
+  .example__expenses {
+    font-family: Lato;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 14px;
+    text-align: center;
+  }
+
+  .example__costs {
+    display: flex;
+    justify-content: left;
+  }
+
+  .example__price {
     font-family: Oswald;
     font-size: 20px;
     font-weight: 400;
@@ -80,10 +282,20 @@
     text-align: center;
     text-transform: uppercase;
   }
-}
 
-.example__image {
-  position: absolute;
-  right: 110px;
-  top: 0;
-}
+  .example__food {
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 20px;
+    margin-right: 63px;
+    text-transform: uppercase;
+  }
+
+  .example__image {
+    position: absolute;
+    right: 110px;
+    top: 0;
+  }
+
+}
\ No newline at end of file
diff --git a/source/less/blocks/extra.less b/source/less/blocks/extra.less
index f813d6f..a304022 100644
--- a/source/less/blocks/extra.less
+++ b/source/less/blocks/extra.less
@@ -1,34 +1,160 @@
 .extra__wrapper {
-  margin: 0 110px 87px 110px;
+  margin: 0 20px 35px 20px;
 }
 
 .extra__title {
   font-family: Oswald;
-  font-size: 36px;
+  font-size: 24px;
   font-weight: 400;
-  line-height: 36px;
+  line-height: 24px;
   margin: 0;
   padding: 0;
-  margin-bottom: 80px;
-}
-
-.extra__table {
-  display: flex;
+  margin-bottom: 49px;
 }
 
 .extra__list {
   list-style-type: none;
   margin: 0;
   padding: 0;
-  width: 896px;
 }
 
 .extra__item {
-  display: grid;
-  grid-template-columns: 326px 243px 82px 245px;
-  min-height: 40px;
-  margin-bottom: 40px;
-  &--name {
+  margin-bottom: 31px;
+}
+
+.extra__name {
+  font-family: Oswald;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 16px;
+  text-transform: uppercase;
+  margin: 0;
+  padding: 0;
+  margin-bottom: 13px;
+}
+
+.extra__card {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+}
+
+.extra__amount {
+  font-family: Lato;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 14px;
+  margin: 0;
+  padding: 0;
+}
+
+.extra__price {
+  font-family: Lato;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 14px;
+  margin: 0;
+  padding: 0;
+}
+
+.extra__button {
+  display: block;
+  text-decoration: none;
+  font-family: Oswald;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  text-align: center;
+  color: #FFFFFF;
+  padding: 10px 0px 10px 0px;
+  background: #68B738;
+  width: 280px;
+  margin: 0 auto;
+  text-transform: uppercase;
+}
+
+.extra__item:last-child {
+  margin-bottom: 54px;
+}
+
+.extra__gift {
+  position: relative;
+  width: 280px;
+  min-height: 290px;
+  background-image: url(../img/extra-gift.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  z-index: -2;
+}
+
+.extra__gift::before {
+  position: absolute;
+  content: "";
+  width: 280px;
+  min-height: 290px;
+  background: #68B738D9;
+  opacity: 85%;
+  z-index: -1;
+}
+
+.extra__image {
+  display: block;
+  margin: 0 auto;
+  padding: 0;
+}
+
+.extra__description {
+  margin: 0 auto;
+  padding: 0;
+  font-family: Lato;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  text-align: center;
+  color: #FFFFFF;
+  width: 161px;
+}
+
+@media (min-width: @tabletop-width) {
+
+  .extra__wrapper {
+    margin: 0 30px 75px 30px;
+  }
+
+  .extra__title {
+    font-family: Oswald;
+    font-size: 36px;
+    font-weight: 400;
+    line-height: 36px;
+    margin: 0;
+    padding: 0;
+    margin-bottom: 108px;
+  }
+
+  .extra__table {
+    display: block;
+  }
+
+  .extra__list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    width: 708px;
+  }
+
+  .extra__item {
+    display: block;
+    width: 632px;
+    min-height: 85px;
+    margin-bottom: 40px;
+  }
+
+  .extra__total {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .extra__name {
     font-family: Oswald;
     font-size: 20px;
     font-weight: 400;
@@ -37,15 +163,18 @@
     margin: 0;
     padding: 0;
   }
-  &--amount {
+
+  .extra__amount {
     font-family: Lato;
     font-size: 16px;
     font-weight: 400;
     line-height: 20px;
     margin: 0;
     padding: 0;
+    margin-right: 49px;
   }
-  &--price {
+
+  .extra__price {
     font-family: Lato;
     font-size: 16px;
     font-weight: 400;
@@ -53,8 +182,9 @@
     margin: 0;
     padding: 0;
   }
-  &--button {
-    width: 244px;
+
+  .extra__button {
+    width: 632px;
     height: 40px;
     top: 15px;
     left: 651px;
@@ -71,49 +201,177 @@
     color: #FFFFFF;
     text-transform: uppercase;
   }
-}
 
-.extra__item:last-child {
-  margin-bottom: 0;
-}
+  .extra__item:last-child {
+    margin-bottom: 0;
+  }
 
-.extra__gift {
-  position: relative;
-  width: 245px;
-  min-height: 288px;
-  background-image: url(../img/extra-gift.jpg);
-  background-size: cover;
-  background-repeat: no-repeat;
-  margin-left: 80px;
-  z-index: -2;
-}
+  .extra__gift {
+    position: relative;
+    width: 245px;
+    min-height: 288px;
+    background-image: url(../img/extra-gift.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    margin: 0;
+    z-index: -2;
+  }
 
-.extra__gift::before {
-  position: absolute;
-  content: "";
-  width: 245px;
-  min-height: 288px;
-  background: #68B738D9;
-  opacity: 85%;
-  z-index: -1;
-}
+  .extra__gift::before {
+    position: absolute;
+    content: "";
+    width: 245px;
+    min-height: 288px;
+    background: #68B738D9;
+    opacity: 85%;
+    z-index: -1;
+  }
 
-.extra__image {
-  display: block;
-  margin: 0 auto;
-  padding: 0;
-  margin-top: 56px;
-  margin-bottom: 46px;
-}
+  .extra__image {
+    display: block;
+    margin: 0 auto;
+    padding: 0;
+    margin-top: 56px;
+    margin-bottom: 46px;
+  }
 
-.extra__description {
-  margin: 0 auto;
-  padding: 0;
-  font-family: Lato;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 20px;
-  text-align: center;
-  color: #FFFFFF;
-  width: 161px;
+  .extra__description {
+    margin: 0 auto;
+    padding: 0;
+    font-family: Lato;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
+    text-align: center;
+    color: #FFFFFF;
+    width: 161px;
+  }
 }
+
+@media (min-width: @desktop-width) {
+
+  .extra__wrapper {
+    margin: 0 110px 87px 110px;
+  }
+
+  .extra__title {
+    font-family: Oswald;
+    font-size: 36px;
+    font-weight: 400;
+    line-height: 36px;
+    margin: 0;
+    padding: 0;
+    margin-bottom: 80px;
+  }
+
+  .extra__table {
+    display: flex;
+  }
+
+  .extra__list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    width: 896px;
+  }
+
+  .extra__item {
+    display: grid;
+    grid-template-columns: 326px 325px 245px;
+    min-height: 40px;
+    margin-bottom: 40px;
+  }
+
+  .extra__name {
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 20px;
+    text-transform: uppercase;
+    margin: 0;
+    padding: 0;
+  }
+
+  .extra__amount {
+    font-family: Lato;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
+    margin: 0;
+    padding: 0;
+  }
+
+  .extra__price {
+    font-family: Lato;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
+    margin: 0;
+    padding: 0;
+    margin-right: 40px;
+  }
+
+  .extra__button {
+    width: 244px;
+    height: 40px;
+    top: 15px;
+    left: 651px;
+    padding: 10px 0px 10px 0px;
+    gap: 0px;
+    opacity: 0px;
+    text-decoration: none;
+    background: #68B738;
+    font-family: Oswald;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
+    text-align: center;
+    color: #FFFFFF;
+    text-transform: uppercase;
+  }
+
+  .extra__item:last-child {
+    margin-bottom: 0;
+  }
+
+  .extra__gift {
+    position: relative;
+    width: 245px;
+    min-height: 288px;
+    background-image: url(../img/extra-gift.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    margin-left: 80px;
+    z-index: -2;
+  }
+
+  .extra__gift::before {
+    position: absolute;
+    content: "";
+    width: 245px;
+    min-height: 288px;
+    background: #68B738D9;
+    opacity: 85%;
+    z-index: -1;
+  }
+
+  .extra__image {
+    display: block;
+    margin: 0 auto;
+    padding: 0;
+    margin-top: 56px;
+    margin-bottom: 46px;
+  }
+
+  .extra__description {
+    margin: 0 auto;
+    padding: 0;
+    font-family: Lato;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
+    text-align: center;
+    color: #FFFFFF;
+    width: 161px;
+  }
+}
\ No newline at end of file
diff --git a/source/less/blocks/food.less b/source/less/blocks/food.less
index b2c2e5f..94fdb47 100644
--- a/source/less/blocks/food.less
+++ b/source/less/blocks/food.less
@@ -1,72 +1,166 @@
 .food__wrapper {
   display: flex;
-  margin: 0 110px 71px 110px;
+  margin: 20px;
 }
 
 .food__list {
-  display: flex;
   list-style-type: none;
-  gap: 80px;
   padding: 0;
   margin: 0;
 }
 
 .food__item {
-    width: 570px;
-    min-height: 374px;
-    background-color: #F2F2F2;
-    &--slimming {
-      .food__description {
-      margin: 0 61px 23px 52px;
-      font-family: Lato;
-      font-size: 16px;
-      font-weight: 400;
-      line-height: 24px;
-      text-align: left;
-      }
-      .food__image {
-        margin-right: 62px;
-      }
-    }
-    &--weight {
-      .food__description {
-      margin: 0 67px 23px 52px;
-      font-family: Lato;
-      font-size: 16px;
-      font-weight: 400;
-      line-height: 24px;
-      text-align: left;
-      }
-      .food__image {
-        margin-right: 47px;
-      }
-    }
+  width: 280px;
+  min-height: 266px;
+  background-color: #F2F2F2;
+  margin: 0;
+  padding: 0;
+  margin-bottom: 20px;
 }
 
 .food__title {
   display: flex;
   align-items: center;
-  margin: 41px 0 39px 52px;
   font-family: Oswald;
-  font-size: 36px;
+  font-size: 24px;
   font-weight: 400;
-  line-height: 36px;
-  text-align: left;
+  line-height: 37px;
   text-transform: uppercase;
+  padding: 21px 0 22px 20px;
+  margin: 0;
+}
+
+.food__description {
+  margin: 0 33px 38px 20px;
+  font-family: Lato;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+}
+
+.food__image-slimming {
+  margin-right: 20px;
+}
+
+.food__image-weight {
+  margin-right: 47px;
 }
 
 .food__catalog {
-  margin: 0 0 59px 52px;
+  margin: 0 0 22px 20px;
   font-family: Oswald;
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 400;
-  line-height: 30px;
-  text-align: center;
+  line-height: 16px;
   color: #000000;
   text-decoration: none;
   text-transform: uppercase;
 }
 
 .food__link {
-  margin-left: 25px;
+  margin-left: 15px;
+}
+
+@media (min-width: @tabletop-width) {
+  .food__wrapper {
+    margin: 0 30px 45px 30px;
+  }
+
+  .food__list {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+  }
+
+  .food__item {
+    width: 708px;
+    min-height: 372px;
+    background-color: #F2F2F2;
+    margin-bottom: 0;
+  }
+
+  .food__title {
+    margin: 41px 0 39px 52px;
+    font-size: 36px;
+    line-height: 36px;
+    padding: 0;
+  }
+
+  .food__description {
+    margin: 0 61px 23px 52px;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  .food__image-slimming {
+    margin-right: 62px;
+  }
+
+  .food__image-weight {
+    margin-right: 47px;
+  }
+
+  .food__catalog {
+    margin: 0 0 59px 52px;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 30px;
+  }
+
+  .food__link {
+    margin-left: 25px;
+  }
+
 }
+
+@media (min-width: @desktop-width) {
+
+  .food__wrapper {
+    margin: 0 110px 71px 110px;
+  }
+
+  .food__list {
+    display: flex;
+    flex-direction: row;
+    gap: 80px;
+  }
+
+  .food__item {
+    width: 570px;
+    min-height: 374px;
+    background-color: #F2F2F2;
+    margin-bottom: 0;
+  }
+
+  .food__title {
+    margin: 41px 0 39px 52px;
+    font-size: 36px;
+    line-height: 36px;
+  }
+
+  .food__description {
+    margin: 0 61px 23px 52px;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  .food__image-slimming {
+    margin-right: 62px;
+  }
+
+  .food__image-weight {
+    margin-right: 47px;
+  }
+
+  .food__catalog {
+    margin: 0 0 59px 52px;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 30px;
+  }
+
+  .food__link {
+    margin-left: 25px;
+  }
+
+}
\ No newline at end of file
diff --git a/source/less/blocks/form.less b/source/less/blocks/form.less
index 6595f14..a972b11 100644
--- a/source/less/blocks/form.less
+++ b/source/less/blocks/form.less
@@ -1,36 +1,30 @@
 .form__wrapper {
-  margin: 0 110px 0 110px;
+  margin: 0 20px 45px 20px;
 }
 
 .form__title {
   font-family: Oswald;
-  font-size: 60px;
+  font-size: 36px;
   font-weight: 400;
-  line-height: 60px;
+  line-height: 36px;
   margin: 0;
   padding: 0;
-  margin-bottom: 55px;
+  margin-bottom: 37px;
 }
 
 .form__description {
   font-family: Oswald;
-  font-size: 20px;
+  font-size: 14px;
   font-weight: 400;
-  line-height: 30px;
-  width: 323px;
+  line-height: 18px;
+  width: 226px;
   margin: 0;
   padding: 0;
-  margin-bottom: 66px;
-}
-
-.form__tables {
-  display: flex;
-  justify-content: space-between;
+  margin-bottom: 39px;
 }
 
 .form__profile {
-  display: flex;
-  width: 570px;
+  width: 280px;
 }
 
 .form__list {
@@ -42,44 +36,221 @@
 .form__item {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 20px;
+  margin-bottom: 14px;
   align-items: center;
 }
 
 .input-block__label {
   font-family: Oswald;
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 400;
-  line-height: 30px;
+  line-height: 18px;
 }
 
 .input-block__field {
-  width: 510px;
-  height: 52px;
+  width: 228px;
+  height: 45px;
   border: 1px 0px 0px 0px;
   border: 1px solid #E7E7E7;
   font-family: Oswald;
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 400;
-  line-height: 30px;
+  line-height: 18px;
 }
 
 .form__food {
-  display: block;
-  width: 570px;
-  min-height: 196px;
-  border: 1px solid #E7E7E7;
+  width: 280px;
   padding-top: 12px;
 }
 
 .radio-block__label {
   font-family: Oswald;
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 400;
-  line-height: 30px;
+  line-height: 18px;
 }
 
 .radio-block {
   margin-top: 13px;
-  margin-left: 28px;
 }
+
+@media (min-width: @tabletop-width) {
+
+  .form__wrapper {
+    margin: 0 30px 65px 30px;
+  }
+
+  .form__title {
+    font-family: Oswald;
+    font-size: 60px;
+    font-weight: 400;
+    line-height: 60px;
+    margin: 0;
+    padding: 0;
+    margin-top: 65px;
+    margin-bottom: 54px;
+  }
+
+  .form__description {
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 30px;
+    width: 323px;
+    margin: 0;
+    padding: 0;
+    margin-bottom: 66px;
+  }
+
+  .form__tables {
+    display: block;
+  }
+
+  .form__profile {
+    display: flex;
+    width: 628px;
+    margin-bottom: 72px;
+  }
+
+  .form__list {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  .form__item {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    align-items: center;
+  }
+
+  .input-block__label {
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 30px;
+  }
+
+  .input-block__field {
+    width: 568px;
+    height: 52px;
+    border: 1px 0px 0px 0px;
+    border: 1px solid #E7E7E7;
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 30px;
+  }
+
+  .form__food {
+    display: block;
+    width: 570px;
+    min-height: 196px;
+    border: 1px solid #E7E7E7;
+    padding-top: 12px;
+  }
+
+  .radio-block__label {
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 30px;
+  }
+
+  .radio-block {
+    margin-top: 13px;
+    margin-left: 28px;
+  }
+
+}
+
+@media (min-width: @desktop-width) {
+
+  .form__wrapper {
+    margin: 0 110px 0 110px;
+  }
+
+  .form__title {
+    font-family: Oswald;
+    font-size: 60px;
+    font-weight: 400;
+    line-height: 60px;
+    margin: 0;
+    padding: 0;
+    margin-bottom: 55px;
+  }
+
+  .form__description {
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 30px;
+    width: 323px;
+    margin: 0;
+    padding: 0;
+    margin-bottom: 66px;
+  }
+
+  .form__tables {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .form__profile {
+    display: flex;
+    width: 570px;
+  }
+
+  .form__list {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  .form__item {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    align-items: center;
+  }
+
+  .input-block__label {
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 30px;
+  }
+
+  .input-block__field {
+    width: 510px;
+    height: 52px;
+    border: 1px 0px 0px 0px;
+    border: 1px solid #E7E7E7;
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 30px;
+  }
+
+  .form__food {
+    display: block;
+    width: 570px;
+    min-height: 196px;
+    border: 1px solid #E7E7E7;
+    padding-top: 12px;
+  }
+
+  .radio-block__label {
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 30px;
+  }
+
+  .radio-block {
+    margin-top: 13px;
+    margin-left: 28px;
+  }
+
+}
\ No newline at end of file
diff --git a/source/less/blocks/main-footer.less b/source/less/blocks/main-footer.less
index 87c22be..19ec404 100644
--- a/source/less/blocks/main-footer.less
+++ b/source/less/blocks/main-footer.less
@@ -1,8 +1,6 @@
 .main-footer__wrapper {
-  display: flex;
   margin: 0;
-  padding: 0;
-  padding: 66px 110px 66px 110px;
+  padding: 40px 20px;
   justify-content: space-between;
   align-items: center;
 }
@@ -13,5 +11,81 @@
   gap: 24px;
   margin: 0;
   padding: 0;
-  margin-left: 40px;
 }
+
+.logotype {
+  margin: 0px 76px 40px 76px;
+}
+
+.social {
+  margin: 0 74px 40px 74px;
+}
+
+.copyright {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.copyright__link {
+  font-family: Lato;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  text-decoration: none;
+  color: #444444;
+}
+
+@media (min-width: @tabletop-width) {
+
+  .main-footer__wrapper {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    padding: 55px 30px;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .social__list {
+    display: flex;
+    list-style-type: none;
+    gap: 24px;
+    margin: 0;
+    padding: 0;
+    margin-left: 40px;
+  }
+
+  .logotype {
+    margin: 0;
+    padding: 0;
+  }
+
+  .social {
+    margin: 0;
+    padding: 0;
+  }
+
+}
+
+@media (min-width: @desktop-width) {
+
+  .main-footer__wrapper {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    padding: 66px 110px 66px 110px;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .social__list {
+    display: flex;
+    list-style-type: none;
+    gap: 24px;
+    margin: 0;
+    padding: 0;
+    margin-left: 40px;
+  }
+
+}
\ No newline at end of file
diff --git a/source/less/blocks/main-header.less b/source/less/blocks/main-header.less
index 3feb41b..de72b00 100644
--- a/source/less/blocks/main-header.less
+++ b/source/less/blocks/main-header.less
@@ -1,27 +1,87 @@
 .main-header {
-  display: flex;
-  margin: 55px 110px 0 110px;
-  justify-content: space-between;
-}
+    display: flex;
+    margin: 14px 20px;
+    justify-content: space-between;
+  }
 
-.main-header__navigation {
-  display: flex;
-}
+  .main-header__toggle {
+    padding: 0;
+    border: none;
+    background-color: transparent;
+  }
 
-.main-header__list {
-  list-style-type: none;
-  display: flex;
-  gap: 33px;
-  color: #ffffff;
-  font-family: Oswald;
-  font-size: 20px;
-  font-weight: 400;
-  line-height: 30px;
-  text-align: left;
-  text-transform: uppercase;
-}
+  .main-header__list {
+    display: none;
+  }
+
+@media (min-width: @tabletop-width) {
+
+  .main-header {
+    margin: 25px 30px 0 30px;
+    justify-content: space-between;
+  }
+
+  .main-header__navigation {
+    display: flex;
+  }
+
+  .main-header__toggle {
+    display: none;
+  }
+
+  .main-header__list {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    display: flex;
+    gap: 33px;
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 30px;
+    text-align: left;
+    text-transform: uppercase;
+    align-items: center;
+  }
+
+  .main-header__link {
+    color: #000000;
+    text-decoration: none;
+  }
 
-.main-header__link {
-  color: #ffffff;
-  text-decoration: none;
 }
+
+@media (min-width: @desktop-width) {
+
+  .main-header {
+    margin: 55px 110px 0 110px;
+    justify-content: space-between;
+  }
+
+  .main-header__navigation {
+    display: flex;
+  }
+
+  .main-header__toggle {
+    display: none;
+  }
+
+  .main-header__list {
+    list-style-type: none;
+    display: flex;
+    gap: 33px;
+    color: #ffffff;
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 30px;
+    text-align: left;
+    text-transform: uppercase;
+  }
+
+  .main-header__link {
+    color: #ffffff;
+    text-decoration: none;
+  }
+
+}
\ No newline at end of file
diff --git a/source/less/blocks/map.less b/source/less/blocks/map.less
index 2fde36b..d75accd 100644
--- a/source/less/blocks/map.less
+++ b/source/less/blocks/map.less
@@ -1,8 +1,4 @@
 .map__wrapper {
-  display: flex;
-  min-height: 400px;
-  background-image: url(/img/map.jpg);
-  background-size: cover;
   padding: 0;
   margin: 0;
 }
@@ -11,42 +7,150 @@
   display: flex;
   margin: 0;
   padding: 0;
-  width: 565px;
-  min-height: 199px;
+  width: 320px;
+  min-height: 122px;
   background-color: #FFFFFF;
   flex-shrink: 0;
-  margin: 95px 0 106px 110px;
-  padding: 60px 78px 60px 80px;
+  padding: 26px 20px;
 }
 
 .map__invite {
   margin: 0;
   padding: 0;
   font-family: Oswald;
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 400;
-  line-height: 26px;
+  line-height: 20px;
   text-transform: uppercase;
-  margin-right: 87px;
+}
+.map__address {
+  margin: 0;
+  padding: 0;
+  font-family: Lato;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+}
+.map__city {
+  margin: 0;
+  padding: 0;
+  font-family: Lato;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
 }
 
-.map__description {
-  &--address {
+@media (min-width: @tabletop-width) {
+
+  .map__wrapper {
+    padding: 0;
+    margin: 0;
+  }
+
+  .map__contacts {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    width: 768px;
+    min-height: 200px;
+    background-color: #FFFFFF;
+    flex-shrink: 0;
+    padding: 60px 70px;
+  }
+
+  .map__invite {
+    margin: 0;
+    padding: 0;
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 26px;
+    text-transform: uppercase;
+    width: 163px;
+  }
+
+  .map__description {
+    width: 157px;
+    text-align: right;
+  }
+
+  .map__address {
     margin: 0;
     padding: 0;
     font-family: Lato;
     font-size: 16px;
     font-weight: 400;
     line-height: 20px;
-    margin-bottom: 19px;
   }
-  &--city {
+  .map__city {
     margin: 0;
     padding: 0;
     font-family: Lato;
     font-size: 16px;
     font-weight: 400;
     line-height: 20px;
-    margin-bottom: 19px;
   }
+
 }
+
+@media (min-width: @desktop-width) {
+
+  .map__wrapper {
+    display: flex;
+    min-height: 400px;
+    background-image: url(/img/map.jpg);
+    background-size: cover;
+    padding: 0;
+    margin: 0;
+  }
+
+  .map__contacts {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    width: 565px;
+    min-height: 199px;
+    background-color: #FFFFFF;
+    flex-shrink: 0;
+    margin: 95px 0 106px 110px;
+    padding: 60px 78px 60px 80px;
+  }
+
+  .map__invite {
+    margin: 0;
+    padding: 0;
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 26px;
+    text-transform: uppercase;
+    margin-right: 87px;
+  }
+
+  .map__description {
+    &--address {
+      margin: 0;
+      padding: 0;
+      font-family: Lato;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 20px;
+      margin-bottom: 19px;
+    }
+    &--city {
+      margin: 0;
+      padding: 0;
+      font-family: Lato;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 20px;
+      margin-bottom: 19px;
+    }
+  }
+
+  .map__image {
+    display: none;
+  }
+
+}
\ No newline at end of file
diff --git a/source/less/blocks/products.less b/source/less/blocks/products.less
index 78a202f..571cca0 100644
--- a/source/less/blocks/products.less
+++ b/source/less/blocks/products.less
@@ -1,54 +1,38 @@
 .products__wrapper {
-  margin: 0 110px 76px 110px;
+  margin: 0 20px 50px 20px;
 }
 
 .products__title {
   margin: 0;
   padding: 0;
   font-family: Oswald;
-  font-size: 60px;
+  font-size: 36px;
   font-weight: 400;
-  line-height: 60px;
-  margin-bottom: 84px;
+  line-height: 36px;
+  margin-bottom: 41px;
 }
 
 .products__list {
-  display: grid;
-  grid-template-columns: 245px 245px 245px 245px;
-  grid-template-rows: 511px 511px;
-  gap: 80px;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-.products__item {
-  position: relative;
+.product {
+  margin-bottom: 45px;
 }
 
-.products__item::before {
-  position: absolute;
-  content: "";
-  background-color: #F2F2F2;
-  width: 245px;
-  min-height: 430px;
-  z-index: -1;
-  bottom: 0;
+.products__item {
+  position: relative;
 }
 
-.products__item:last-child::before {
-  position: absolute;
-  content: "";
-  background-color: #FFFFFF;
-  width: 245px;
-  min-height: 430px;
-  z-index: -1;
-  bottom: 0;
-  border: 2px solid #F2F2F2;
+.product__card {
+  display: flex;
 }
 
 .product__link {
   text-decoration: none;
+  width: 140px;
 }
 
 .product__image {
@@ -58,49 +42,43 @@
 
 .product__name {
   display: flex;
-  margin: 0 auto;
+  margin: 0;
   padding: 0;
   font-family: Oswald;
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 400;
-  line-height: 24px;
+  line-height: 20px;
   text-transform: uppercase;
   color: #222222;
   text-align: center;
-  width: 140px;
-  margin-bottom: 23px;
-  margin-top: 19px;
+  width: 76px;
+  margin-bottom: 14px;
 }
 
 .product__description {
   list-style-type: none;
   margin: 0;
   padding: 0;
-  margin: 0 38px 43px 38px;
+  width: 140px;
 }
 
 .product__item {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 10px;
-}
-
-.product__item:nth-child(3n) {
-  margin-bottom: 0;
 }
 
 .product__category {
   font-family: Lato;
-  font-size: 16px;
+  font-size: 12px;
   font-weight: 400;
-  line-height: 20px;
+  line-height: 16px;
 }
 
 .product__value {
   font-family: Lato;
-  font-size: 16px;
+  font-size: 12px;
   font-weight: 400;
-  line-height: 20px;
+  line-height: 16px;
 }
 
 .product__button {
@@ -114,14 +92,15 @@
   color: #FFFFFF;
   padding: 10px 0px 10px 0px;
   background: #68B738;
-  width: 169px;
+  width: 280px;
   margin: 0 auto;
   text-transform: uppercase;
 }
 
 .product-more__image {
+  margin: 0;
   padding: 0;
-  margin: 130px 93px 40px 93px;
+  margin-bottom: 23px;
 }
 
 .product-more__name {
@@ -129,23 +108,23 @@
   margin: 0 auto;
   padding: 0;
   font-family: Oswald;
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 400;
-  line-height: 24px;
+  line-height: 20px;
   text-transform: uppercase;
   color: #222222;
   text-align: center;
-  width: 140px;
-  margin-bottom: 26px;
+  width: 204px;
+  margin-bottom: 8px;
 }
 
 .product-more__show {
   font-family: Lato;
-  font-size: 16px;
+  font-size: 12px;
   font-weight: 400;
-  line-height: 18px;
+  line-height: 16px;
   text-align: center;
-  margin: 0 38px 43px 38px;
+  margin: 0 51px 21px 51px;
 }
 
 .product-more__button {
@@ -159,7 +138,362 @@
   color: #444444;
   padding: 10px 0px 10px 0px;
   background: #F2F2F2;
-  width: 169px;
+  width: 280px;
   margin: 0 auto;
   text-transform: uppercase;
 }
+
+@media (min-width: @tabletop-width) {
+
+  .products__wrapper {
+    margin: 65px 30px 70px 30px;
+  }
+
+  .products__title {
+    margin: 0;
+    padding: 0;
+    font-family: Oswald;
+    font-size: 60px;
+    font-weight: 400;
+    line-height: 60px;
+    margin-bottom: 84px;
+  }
+
+  .products__list {
+    display: grid;
+    grid-template-columns: 324px 324px;
+    grid-template-rows: 511px 511px 511px 511px;
+    gap: 60px;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .products__item {
+    position: relative;
+  }
+
+  .products__item::before {
+    position: absolute;
+    content: "";
+    background-color: #F2F2F2;
+    width: 324px;
+    min-height: 430px;
+    z-index: -1;
+    bottom: 0;
+  }
+
+  .products__item:last-child::before {
+    position: absolute;
+    content: "";
+    background-color: #FFFFFF;
+    width: 324px;
+    min-height: 430px;
+    z-index: -1;
+    bottom: 0;
+    border: 2px solid #F2F2F2;
+  }
+
+  .product {
+    margin-bottom: 0;
+  }
+
+  .product__card {
+    display: block;
+  }
+
+  .product__link {
+    text-decoration: none;
+  }
+
+  .product__image {
+    display: block;
+    margin: 0 auto;
+  }
+
+  .product__name {
+    display: flex;
+    margin: 0 auto;
+    padding: 0;
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 24px;
+    text-transform: uppercase;
+    color: #222222;
+    text-align: center;
+    width: 140px;
+    margin-bottom: 23px;
+    margin-top: 19px;
+  }
+
+  .product__description {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    margin: 0 auto;
+    width: 169px;
+    margin-bottom: 37px;
+  }
+
+  .product__item {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .product__category {
+    font-family: Lato;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
+  }
+
+  .product__value {
+    font-family: Lato;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
+  }
+
+  .product__button {
+    display: block;
+    text-decoration: none;
+    font-family: Oswald;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
+    text-align: center;
+    color: #FFFFFF;
+    padding: 10px 0px 10px 0px;
+    background: #68B738;
+    width: 250px;
+    margin: 0 auto;
+    text-transform: uppercase;
+  }
+
+  .product-more__image {
+    display: block;
+    padding: 0;
+    margin: 50px auto;
+  }
+
+  .product-more__name {
+    display: flex;
+    margin: 0 auto;
+    padding: 0;
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 24px;
+    text-transform: uppercase;
+    color: #222222;
+    text-align: center;
+    width: 140px;
+    margin-bottom: 26px;
+  }
+
+  .product-more__show {
+    font-family: Lato;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 18px;
+    text-align: center;
+    margin: 0 38px 43px 38px;
+  }
+
+  .product-more__button {
+    display: block;
+    text-decoration: none;
+    font-family: Oswald;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
+    text-align: center;
+    color: #444444;
+    padding: 10px 0px 10px 0px;
+    background: #F2F2F2;
+    width: 169px;
+    margin: 0 auto;
+    text-transform: uppercase;
+  }
+
+}
+
+@media (min-width: @desktop-width) {
+
+  .products__wrapper {
+    margin: 0 110px 76px 110px;
+  }
+
+  .products__title {
+    margin: 0;
+    padding: 0;
+    font-family: Oswald;
+    font-size: 60px;
+    font-weight: 400;
+    line-height: 60px;
+    margin-bottom: 84px;
+  }
+
+  .products__list {
+    display: grid;
+    grid-template-columns: 245px 245px 245px 245px;
+    grid-template-rows: 511px 511px;
+    gap: 80px;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .products__item {
+    position: relative;
+  }
+
+  .products__item::before {
+    position: absolute;
+    content: "";
+    background-color: #F2F2F2;
+    width: 245px;
+    min-height: 430px;
+    z-index: -1;
+    bottom: 0;
+  }
+
+  .products__item:last-child::before {
+    position: absolute;
+    content: "";
+    background-color: #FFFFFF;
+    width: 245px;
+    min-height: 430px;
+    z-index: -1;
+    bottom: 0;
+    border: 2px solid #F2F2F2;
+  }
+
+  .product {
+    margin-bottom: 0;
+  }
+
+  .product__card {
+    display: block;
+  }
+
+  .product__link {
+    text-decoration: none;
+  }
+
+  .product__image {
+    display: block;
+    margin: 0 auto;
+  }
+
+  .product__name {
+    display: flex;
+    margin: 0 auto;
+    padding: 0;
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 24px;
+    text-transform: uppercase;
+    color: #222222;
+    text-align: center;
+    width: 140px;
+    margin-bottom: 23px;
+    margin-top: 19px;
+  }
+
+  .product__description {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    margin: 0 38px 43px 38px;
+    width: 169px;
+  }
+
+  .product__item {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+
+  .product__item:nth-child(3n) {
+    margin-bottom: 0;
+  }
+
+  .product__category {
+    font-family: Lato;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
+  }
+
+  .product__value {
+    font-family: Lato;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
+  }
+
+  .product__button {
+    display: block;
+    text-decoration: none;
+    font-family: Oswald;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
+    text-align: center;
+    color: #FFFFFF;
+    padding: 10px 0px 10px 0px;
+    background: #68B738;
+    width: 169px;
+    margin: 0 auto;
+    text-transform: uppercase;
+  }
+
+  .product-more__image {
+    padding: 0;
+    margin: 130px 93px 40px 93px;
+  }
+
+  .product-more__name {
+    display: flex;
+    margin: 0 auto;
+    padding: 0;
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 24px;
+    text-transform: uppercase;
+    color: #222222;
+    text-align: center;
+    width: 140px;
+    margin-bottom: 26px;
+  }
+
+  .product-more__show {
+    font-family: Lato;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 18px;
+    text-align: center;
+    margin: 0 38px 43px 38px;
+  }
+
+  .product-more__button {
+    display: block;
+    text-decoration: none;
+    font-family: Oswald;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
+    text-align: center;
+    color: #444444;
+    padding: 10px 0px 10px 0px;
+    background: #F2F2F2;
+    width: 169px;
+    margin: 0 auto;
+    text-transform: uppercase;
+  }
+
+}
\ No newline at end of file
diff --git a/source/less/blocks/program.less b/source/less/blocks/program.less
index 50c899f..6957cbe 100644
--- a/source/less/blocks/program.less
+++ b/source/less/blocks/program.less
@@ -1,66 +1,176 @@
 .program {
   position: relative;
-  min-height: 542px;
 }
 
 .program::before {
   position: absolute;
   content: "";
   background-color: #68B738D9;
-  width: 720px;
-  height: 694px;
-  right: 0;
-  top: -235px;
+  width: 320px;
+  height: 302px;
   z-index: -1;
 }
 
 .program__wrapper {
-  margin: 0 110px 0 110px;
+  display: flex;
+  flex-direction: column;
 }
 
 .program__header {
-  margin: 110px 0 0 80px;
-  width: 414px;
+  padding-top: 27px;
+  width: 249px;
+  margin-left: 36px;
 }
 
 .program__title {
   font-family: Oswald;
-  font-size: 60px;
+  font-size: 36px;
   font-weight: 400;
-  line-height: 60px;
-  text-align: left;
+  line-height: 36px;
+  text-align: center;
   margin: 0;
+  color: #FFFFFF;
 }
 
 .program__slogan {
-  margin: 0;
   font-family: Oswald;
-  font-size: 20px;
+  font-size: 14px;
   font-weight: 400;
-  line-height: 20px;
-  text-align: left;
-  margin-top: 40px;
-  margin-bottom: 52px;
+  line-height: 14px;
+  margin-top: 25px;
+  margin-bottom: 29px;
+  text-align: center;
   text-transform: uppercase;
+  color: #FFFFFF;
 }
 
 .program__toggle {
-  width: 244px;
-  height: 54px;
-  top: 456px;
-  left: 190px;
-  padding: 14px 26px 14px 26px;
-  gap: 4px;
-  opacity: 0px;
+  padding: 10px 44px 10px 44px;
   background-color: #68B738;
   color: #ffffff;
   text-decoration: none;
   text-transform: uppercase;
+  margin-top: 23px;
+  width: 280px;
+  margin-left: 20px;
+  text-align: center;
 }
 
-.program__image {
-  position: absolute;
-  left: 557px;
-  right: 331px;
-  top: -92px;
+@media (min-width: @tabletop-width) {
+
+  .program__wrapper {
+    margin: 0 30px;
+  }
+
+  .program::before {
+    display: none;
+  }
+
+  .program__header {
+    margin: 65px 0 50px 90px;
+    padding: 0;
+    width: 414px;
+  }
+
+  .program__title {
+    font-family: Oswald;
+    font-size: 60px;
+    font-weight: 400;
+    line-height: 60px;
+    text-align: left;
+    margin: 0;
+    color: #000000;
+  }
+
+  .program__slogan {
+    margin: 0;
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 20px;
+    text-align: left;
+    margin-top: 40px;
+    text-transform: uppercase;
+    color: #000000;
+  }
+
+  .program__image {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .program__toggle {
+    width: 244px;
+    margin: 0;
+    padding: 14px 26px 14px 26px;
+    margin-left: 90px;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 26px;
+  }
+
 }
+
+@media (min-width: @desktop-width) {
+
+  .program {
+    min-height: 542px;
+  }
+
+  .program::before {
+    display: block;
+    width: 720px;
+    height: 694px;
+    right: 0;
+    top: -235px;
+  }
+
+  .program__wrapper {
+    margin: 0 110px 0 110px;
+  }
+
+  .program__header {
+    margin: 110px 0 0 80px;
+    width: 414px;
+  }
+
+  .program__title {
+    font-family: Oswald;
+    font-size: 60px;
+    font-weight: 400;
+    line-height: 60px;
+    text-align: left;
+    margin: 0;
+    color: #000000;
+  }
+
+  .program__slogan {
+    margin: 0;
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 20px;
+    text-align: left;
+    margin-top: 40px;
+    margin-bottom: 52px;
+    text-transform: uppercase;
+    color: #000000;
+  }
+
+  .program__image {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .program__toggle {
+    width: 244px;
+    padding: 14px 26px 14px 26px;
+    margin-left: 80px;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 26px;
+  }
+
+}
\ No newline at end of file
diff --git a/source/less/blocks/site-header.less b/source/less/blocks/site-header.less
index e22227c..9551241 100644
--- a/source/less/blocks/site-header.less
+++ b/source/less/blocks/site-header.less
@@ -1,27 +1,88 @@
 .site-header {
   display: flex;
-  margin: 55px 110px 63px 110px;
+  margin: 14px 20px;
   justify-content: space-between;
 }
 
-.site-header__navigation {
-  display: flex;
+.site-header__toggle {
+  padding: 0;
+  border: none;
+  background-color: transparent;
 }
 
 .site-header__list {
-  display: flex;
-  gap: 33px;
-  color: #ffffff;
-  font-family: Oswald;
-  font-size: 20px;
-  font-weight: 400;
-  line-height: 30px;
-  text-align: left;
-  text-transform: uppercase;
-  list-style-type: none;
+  display: none;
 }
 
-.site-header__link {
-  color: #111111;
-  text-decoration: none;
+@media (min-width: @tabletop-width) {
+
+  .site-header {
+    margin: 25px 30px 0 30px;
+    justify-content: space-between;
+  }
+
+  .site-header__navigation {
+    display: flex;
+  }
+
+  .site-header__toggle {
+    display: none;
+  }
+
+  .site-header__list {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    display: flex;
+    gap: 33px;
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 30px;
+    text-align: left;
+    text-transform: uppercase;
+    align-items: center;
+  }
+
+  .site-header__link {
+    color: #000000;
+    text-decoration: none;
+  }
+
 }
+
+@media (min-width: @desktop-width) {
+
+  .site-header {
+    display: flex;
+    margin: 55px 110px 63px 110px;
+    justify-content: space-between;
+  }
+
+  .site-header__navigation {
+    display: flex;
+  }
+
+  .site-header__toggle {
+    display: none;
+  }
+
+  .site-header__list {
+    display: flex;
+    gap: 33px;
+    color: #ffffff;
+    font-family: Oswald;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 30px;
+    text-align: left;
+    text-transform: uppercase;
+    list-style-type: none;
+  }
+
+  .site-header__link {
+    color: #111111;
+    text-decoration: none;
+  }
+
+}
\ No newline at end of file
diff --git a/source/less/blocks/work.less b/source/less/blocks/work.less
index 5739023..4ffaf93 100644
--- a/source/less/blocks/work.less
+++ b/source/less/blocks/work.less
@@ -1,72 +1,211 @@
 .work__wrapper {
-  margin: 0 110px 69px 110px;
+  margin: 0 20px 49px 20px;
 }
 
 .work__title {
   font-family: Oswald;
-  font-size: 60px;
+  font-size: 36px;
   font-weight: 400;
-  line-height: 60px;
+  line-height: 40px;
   margin: 0;
-  margin-bottom: 32px;
+  margin-bottom: 40px;
 }
 
 .work__list {
-  display: flex;
   list-style-type: none;
   padding: 0;
-  gap: 94px;
   margin: 0;
 }
 
 .work__item {
-  width: 230px;
-  min-height: 280px;
-  &--sheet {
-    position: relative;
-    .work__number {
-      position: absolute;
-      top: 40px;
-      right: 35px;
-      z-index: -1;
-    }
-  }
-  &--powder {
-    position: relative;
-    .work__number {
-      position: absolute;
-      top: 40px;
-      right: 0;
-      z-index: -1;
-    }
-  }
-  &--reception {
-    position: relative;
-    .work__number {
-      position: absolute;
-      top: 40px;
-      right: 0;
-      z-index: -1;
-    }
-  }
-  &--time {
-    position: relative;
-    .work__number {
-      position: absolute;
-      top: 40px;
-      right: 0;
-      z-index: -1;
-    }
-  }
+  display: flex;
+  width: 280px;
+  min-height: 60px;
+  margin-bottom: 20px;
+}
+
+.work__item:last-child {
+  margin-bottom: 0;
 }
 
 .work__image {
-  margin-top: 40px;
+  margin-right: 20px;
+}
+
+.work__number {
+  display: none;
 }
 
 .work__description {
   font-family: Lato;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 400;
-  line-height: 24px;
+  line-height: 18px;
+  margin: 0;
+  padding: 0;
 }
+
+@media (min-width: @tabletop-width) {
+
+  .work__wrapper {
+    margin: 0 30px 92px 30px;
+  }
+
+  .work__title {
+    font-family: Oswald;
+    font-size: 60px;
+    font-weight: 400;
+    line-height: 60px;
+    margin: 0;
+    margin-bottom: 32px;
+  }
+
+  .work__list {
+    display: grid;
+    grid-template-columns: 346px 230px;
+    list-style-type: none;
+    padding: 0;
+    gap: 37px;
+    margin: 0;
+  }
+
+  .work__item {
+    flex-direction: column;
+    width: 230px;
+    min-height: 280px;
+    &--sheet {
+      position: relative;
+      .work__number {
+        display: block;
+        position: absolute;
+        top: 40px;
+        right: 35px;
+        z-index: -1;
+      }
+    }
+    &--powder {
+      position: relative;
+      .work__number {
+        display: block;
+        position: absolute;
+        top: 40px;
+        right: 0;
+        z-index: -1;
+      }
+    }
+    &--reception {
+      position: relative;
+      .work__number {
+        display: block;
+        position: absolute;
+        top: 40px;
+        right: 0;
+        z-index: -1;
+      }
+    }
+    &--time {
+      position: relative;
+      .work__number {
+        display: block;
+        position: absolute;
+        top: 40px;
+        right: 0;
+        z-index: -1;
+      }
+    }
+  }
+
+  .work__image {
+    margin-top: 40px;
+  }
+
+  .work__description {
+    font-family: Lato;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+  }
+
+}
+
+@media (min-width: @desktop-width) {
+
+  .work__wrapper {
+    margin: 0 110px 69px 110px;
+  }
+
+  .work__title {
+    font-family: Oswald;
+    font-size: 60px;
+    font-weight: 400;
+    line-height: 60px;
+    margin: 0;
+    margin-bottom: 32px;
+  }
+
+  .work__list {
+    display: flex;
+    list-style-type: none;
+    padding: 0;
+    gap: 94px;
+    margin: 0;
+  }
+
+  .work__item {
+    flex-direction: column;
+    width: 230px;
+    min-height: 280px;
+    &--sheet {
+      position: relative;
+      .work__number {
+        display: block;
+        position: absolute;
+        top: 40px;
+        right: 35px;
+        z-index: -1;
+      }
+    }
+    &--powder {
+      position: relative;
+      .work__number {
+        display: block;
+        position: absolute;
+        top: 40px;
+        right: 0;
+        z-index: -1;
+      }
+    }
+    &--reception {
+      position: relative;
+      .work__number {
+        display: block;
+        position: absolute;
+        top: 40px;
+        right: 0;
+        z-index: -1;
+      }
+    }
+    &--time {
+      position: relative;
+      .work__number {
+        display: block;
+        position: absolute;
+        top: 40px;
+        right: 0;
+        z-index: -1;
+      }
+    }
+  }
+
+  .work__image {
+    margin-top: 40px;
+  }
+
+  .work__description {
+    font-family: Lato;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+  }
+
+}
\ No newline at end of file
diff --git a/source/less/style.less b/source/less/style.less
index 4da4d73..47196aa 100644
--- a/source/less/style.less
+++ b/source/less/style.less
@@ -55,6 +55,9 @@
   font-display: swap;
 }
 
+@desktop-width: 1440px;
+@tabletop-width: 768px;
+
 *,*::before,*::after{box-sizing: border-box;}
 
 html {
@@ -62,7 +65,7 @@ html {
 }
 
 body {
-  width: 1440px;
+  width: 320px;
   margin: 0;
   display: flex;
   flex-direction: column;
@@ -75,6 +78,18 @@ body {
   margin: 0 auto;
 }
 
+@media (min-width: @tabletop-width) {
+  body {
+    width: 768px;
+  }
+}
+
+@media (min-width: @desktop-width) {
+  body {
+    width: 1440px;
+  }
+}
+
 .visually-hidden {
   position: absolute;
   width: 1px;
@@ -86,4 +101,4 @@ body {
   clip-path: inset(100%);
   clip: rect(0 0 0 0);
   overflow: hidden;
-}
+}
\ No newline at end of file
