diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index b60070a..790b352 100644
--- a/css/style.css
+++ b/css/style.css
@@ -144,41 +144,8 @@ svg * {
   Удаляем все анимации и переходы для людей,
   которые предпочитают их не использовать
  */
-@font-face {
-  font-family: "Gilroy";
-  font-style: normal;
-  font-weight: 700;
-  src: url("../font/Gilroy-ExtraBold.otf") format("OpenType");
-  font-display: swap;
-}
-@font-face {
-  font-family: "Gilroy";
-  font-style: light;
-  font-weight: 300;
-  src: url("../font/Gilroy-Light.otf") format("OpenType");
-  font-display: swap;
-}
-@font-face {
-  font-family: "Gilroy";
-  font-style: normal;
-  font-weight: 400;
-  src: url("../font/gilroy-medium.ttf") format("OpenType");
-  font-display: swap;
-}
-:root {
-  --color-blue: #4FBFA5;
-  --color-dark-blue: #00868A;
-  --color-light-blue: #ace2e450;
-  --color-white: #FFFFFF;
-  --color-black: #000000;
-  --color-light-gray: #C4C4C4;
-  --font-family-base: "Gilroy", sans-serif;
-  --border: 1px solid var(--color-white);
-  --container-width: 1295px;
-  --container-padding-x: 15px;
-  --transition-duration: 0.2s;
-}
-
+/* TODO: импорт шрифтов вынести в отдельный файл, чтобы не захломлять файл слитей */
+/* TODO: переменные тоже лучше в отдельный файл вынести и учитывая, что мы используем scss, то будем использвать scss-переменные */
 body {
   font-family: var(--font-family-base);
   font-size: 18px;
@@ -194,6 +161,7 @@ a,
 button {
   -webkit-transition-duration: var(--transition-duration);
           transition-duration: var(--transition-duration);
+  cursor: pointer;
 }
 
 .page-header-top {
@@ -298,6 +266,7 @@ button {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  /* TODO: отдели пустой строкой блоки со стилями */
 }
 .main-section .main-nav .main-nav-button {
   border: none;
@@ -487,6 +456,7 @@ button {
   height: 580px;
   max-width: 526px;
   background-color: var(--color-dark-blue);
+  /* TODO: moreinfo это два слова, надо разделить */
 }
 .main-introduction .introduction-first-line .introduction-innovation .innovation-button {
   position: absolute;
@@ -499,6 +469,10 @@ button {
   font-size: 18px;
   background-color: var(--color-blue);
 }
+.main-introduction .introduction-first-line .introduction-innovation .innovation-button:hover {
+  background-color: var(--color-white);
+  color: var(--color-dark-blue);
+}
 .main-introduction .introduction-first-line .introduction-innovation h3 {
   padding-top: 105px;
   font-size: 30px;
@@ -507,7 +481,7 @@ button {
   color: var(--color-white);
   margin-left: 40px;
 }
-.main-introduction .introduction-first-line .introduction-innovation .innovation-moreinfo {
+.main-introduction .introduction-first-line .introduction-innovation .innovation-more-info {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -515,7 +489,7 @@ button {
       -ms-flex-align: center;
           align-items: center;
 }
-.main-introduction .introduction-first-line .introduction-innovation .innovation-moreinfo .innovation-info-button {
+.main-introduction .introduction-first-line .introduction-innovation .innovation-more-info .innovation-info-button {
   margin: 25px 20px 45px 40px;
   position: relative;
   width: 50px;
@@ -523,7 +497,7 @@ button {
   height: 40px;
   border: 1px solid var(--color-white);
 }
-.main-introduction .introduction-first-line .introduction-innovation .innovation-moreinfo .innovation-info-button::before {
+.main-introduction .introduction-first-line .introduction-innovation .innovation-more-info .innovation-info-button::before {
   content: "";
   position: absolute;
   width: 31px;
@@ -533,7 +507,7 @@ button {
   bottom: 13px;
   left: 10px;
 }
-.main-introduction .introduction-first-line .introduction-innovation .innovation-moreinfo .innovation-info-button:hover {
+.main-introduction .introduction-first-line .introduction-innovation .innovation-more-info .innovation-info-button:hover {
   margin: 25px 20px 45px 40px;
   position: relative;
   width: 50px;
@@ -541,7 +515,7 @@ button {
   height: 40px;
   border: 1px solid var(--color-white);
 }
-.main-introduction .introduction-first-line .introduction-innovation .innovation-moreinfo .innovation-details-link {
+.main-introduction .introduction-first-line .introduction-innovation .innovation-more-info .innovation-details-link {
   font-size: 16px;
   line-height: 24px;
   letter-spacing: 1px;
@@ -551,7 +525,7 @@ button {
   font-weight: 600;
   cursor: pointer;
 }
-.main-introduction .introduction-first-line .introduction-innovation .innovation-moreinfo .innovation-details-link:hover {
+.main-introduction .introduction-first-line .introduction-innovation .innovation-more-info .innovation-details-link:hover {
   font-size: 20px;
   border-bottom: 3px solid var(--color-blue);
 }
@@ -571,6 +545,9 @@ button {
   font-size: 18px;
   background-color: var(--color-blue);
 }
+.main-introduction .introduction-patent .patent-button:hover {
+  background-color: var(--color-dark-blue);
+}
 .main-introduction .introduction-patent .patent-properties {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -626,9 +603,10 @@ button {
 }
 .main-introduction .introduction-patent .patent-properties .patent-properties-list li:nth-of-type(1):hover {
   margin: 0;
-  -webkit-transform-origin: top left;
-      -ms-transform-origin: top left;
-          transform-origin: top left;
+  /* TODO: надо убрать топ, а то элемент вниз сдвигается */
+  -webkit-transform-origin: left;
+      -ms-transform-origin: left;
+          transform-origin: left;
   -webkit-transform: scale(1.5);
       -ms-transform: scale(1.5);
           transform: scale(1.5);
@@ -679,24 +657,30 @@ button {
   background-color: var(--color-dark-blue);
   position: absolute;
 }
+.main-introduction .introduction-news .news-button:hover {
+  background-color: var(--color-white);
+  color: var(--color-blue);
+}
 .main-introduction .introduction-news .news-title-list {
   width: 526px;
   background-color: var(--color-blue);
   padding-top: 105px;
 }
-.main-introduction .introduction-news .news-title-list .news-title-item {
+.main-introduction .introduction-news .news-title-list .news-title-list-item {
   height: 139px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  /* TODO: почисти код от лишних пустых строк */
 }
-.main-introduction .introduction-news .news-title-list .news-title-item label {
+.main-introduction .introduction-news .news-title-list .news-title-list-item label {
   width: 100%;
   height: 100%;
   padding: 40px 40px 0;
   display: block;
+  cursor: pointer;
 }
-.main-introduction .introduction-news .news-title-list .news-title-item .news-title-button {
+.main-introduction .introduction-news .news-title-list .news-title-list-item .news-title-button {
   border: none;
   background-color: transparent;
   color: white;
@@ -707,6 +691,7 @@ button {
 .main-introduction .introduction-news .news-plot-content {
   background-color: var(--color-light-blue);
   height: 522px;
+  display: none;
 }
 .main-introduction .introduction-news .news-plot-content h3 {
   padding: 35px 60px 25px;
@@ -720,21 +705,20 @@ button {
 .main-introduction .introduction-news .news-plot-content .news-plot-subtitle span {
   color: var(--color-dark-blue);
 }
-.main-introduction .introduction-news .news-plot-content .news-plot-list {
+.main-introduction .introduction-news .news-plot-content .news-plot-main {
   padding: 0 60px 78px;
+  /* TODO: обрати внимание, что на макете точечки лишь немного выезжают за заголовок контента. Нужно пофикситью */
 }
-.main-introduction .introduction-news .news-plot-content .news-plot-list li {
-  position: relative;
-  margin-bottom: 20px;
-}
-.main-introduction .introduction-news .news-plot-content .news-plot-list li p {
+.main-introduction .introduction-news .news-plot-content .news-plot-main p {
   font-size: 14px;
   line-height: 21px;
+  position: relative;
+  margin: 0 0 20px 17px;
 }
-.main-introduction .introduction-news .news-plot-content .news-plot-list li:last-of-type {
+.main-introduction .introduction-news .news-plot-content .news-plot-main p:last-of-type {
   margin-bottom: 0;
 }
-.main-introduction .introduction-news .news-plot-content .news-plot-list li::before {
+.main-introduction .introduction-news .news-plot-content .news-plot-main p::before {
   content: "";
   position: absolute;
   background-color: var(--color-dark-blue);
@@ -789,7 +773,10 @@ button {
   left: 30px;
   background-color: var(--color-blue);
 }
-.main-offers .offers .offers-moreinfo {
+.main-offers .offers .offers-name .offers-name-button:hover {
+  background-color: var(--color-dark-blue);
+}
+.main-offers .offers .offers-more-info {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -798,13 +785,13 @@ button {
       -ms-flex-align: end;
           align-items: flex-end;
 }
-.main-offers .offers .offers-moreinfo p {
+.main-offers .offers .offers-more-info p {
   font-size: 21px;
   line-height: 31px;
   padding: 25px 15px 25px 30px;
   color: var(--color-white);
 }
-.main-offers .offers .offers-moreinfo .offers-moreinfo-button {
+.main-offers .offers .offers-more-info .offers-more-info-button {
   margin: 37px 30px 37px 0;
   position: relative;
   width: 70px;
@@ -812,7 +799,7 @@ button {
   height: 35px;
   border: 1px solid var(--color-white);
 }
-.main-offers .offers .offers-moreinfo .offers-moreinfo-button::before {
+.main-offers .offers .offers-more-info .offers-more-info-button::before {
   content: "";
   position: absolute;
   width: 31px;
@@ -821,7 +808,7 @@ button {
   bottom: 13px;
   left: 8px;
 }
-.main-offers .offers .offers-moreinfo .offers-moreinfo-button:hover {
+.main-offers .offers .offers-more-info .offers-more-info-button:hover {
   background-color: var(--color-blue);
 }
 
@@ -857,6 +844,7 @@ footer .footer-container .footer-top .footer-services-title {
 }
 footer .footer-container .footer-top li {
   margin-bottom: 15px;
+  display: inline-block;
 }
 footer .footer-container .footer-top li a {
   font-size: 14px;
@@ -864,12 +852,20 @@ footer .footer-container .footer-top li a {
   color: var(--color-black);
 }
 footer .footer-container .footer-top li a:hover {
-  font-size: 16px;
+  /* TODO: при ховере увеличение размера фонта сдвигаются остальные элементы списка, т.к. увеличивают размер самого элемента. Нужно пофиксить, чтобы соседние элементы не сдвигались  */
   color: var(--color-dark-blue);
 }
 footer .footer-container .footer-top li:last-child {
   margin-bottom: 0;
 }
+footer .footer-container .footer-top li:hover {
+  -webkit-transform: scale(1.2);
+      -ms-transform: scale(1.2);
+          transform: scale(1.2);
+  -webkit-transform-origin: left;
+      -ms-transform-origin: left;
+          transform-origin: left;
+}
 footer .footer-container address {
   font-style: normal;
 }
@@ -965,6 +961,41 @@ footer .container-footer-bottom ul li:last-child {
   width: 65px;
 }
 
+:root {
+  --color-blue: #4FBFA5;
+  --color-dark-blue: #00868A;
+  --color-light-blue: #ace2e450;
+  --color-white: #FFFFFF;
+  --color-black: #000000;
+  --color-light-gray: #C4C4C4;
+  --font-family-base: "Gilroy", sans-serif;
+  --border: 1px solid var(--color-white);
+  --container-width: 1295px;
+  --container-padding-x: 15px;
+  --transition-duration: 0.2s;
+}
+
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 700;
+  src: url("../font/Gilroy-ExtraBold.otf") format("OpenType");
+  font-display: swap;
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: light;
+  font-weight: 300;
+  src: url("../font/Gilroy-Light.otf") format("OpenType");
+  font-display: swap;
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../font/gilroy-medium.ttf") format("OpenType");
+  font-display: swap;
+}
 .container {
   max-width: calc(var(--container-width) + var(--container-padding-x) * 2);
   margin-inline: auto;
@@ -1012,8 +1043,4 @@ footer .container-footer-bottom ul li:last-child {
       -ms-transform: translate(0, -50%);
           transform: translate(0, -50%);
   height: 18px;
-}
-
-.news-plot-content {
-  display: none;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 2de697d..4d0159d 100644
--- a/index.html
+++ b/index.html
@@ -115,8 +115,7 @@ <h2 class="visually-hidden">Знакомство с услугами компа
               <button
                 id="appointment-btn"
                 class="popup-button"
-                type="button"
-              >
+                type="button">
                 Запись на приём
               </button>
             </div>
@@ -149,13 +148,14 @@ <h1 class="banner-title">Косметология</h1>
               <li class="main-category-item">
                 <button
                   class="main-category-button main-category-button__colorful"
-                  type="button"
-                >
+                  type="button">
                   Центр обучения
                 </button>
               </li>
               <li class="main-category-item">
-                <button class="main-category-button" type="button">VIP клиентам</button>
+                <button class="main-category-button" type="button">
+                  VIP клиентам
+                </button>
               </li>
             </ul>
           </div>
@@ -170,7 +170,7 @@ <h2 class="visually-hidden">Нововведения и сертификаты 
               <h3 class="innovation-title">
                 Мы практикуем новый курс процедур аппаратной косметологии
               </h3>
-              <div class="innovation-moreinfo">
+              <div class="innovation-more-info">
                 <button class="innovation-info-button" type="button"></button>
                 <a class="innovation-details-link">подробнее</a>
               </div>
@@ -183,7 +183,9 @@ <h3 class="innovation-title">
               />
             </div>
             <div class="introduction-patent">
-              <button class="patent-button" type="button">Эстетика красоты</button>
+              <button class="patent-button" type="button">
+                Эстетика красоты
+              </button>
               <div class="patent-properties">
                 <ul class="patent-properties-list">
                   <li class="patent-properties-item">
@@ -228,7 +230,7 @@ <h2 class="patent-properties-number">78</h2>
             <div class="news-title">
               <ul class="news-title-list">
                 <!-- TODO: Лучше назвать new-title-list-item, чтобы было понятно что этот item относится к списку -->
-                <li class="news-title-item">
+                <li class="news-title-list-item">
                   <button class="news-title-button" type="button">
                   <label for="a">
                     Почему рекомендуется посещать профессионального
@@ -237,7 +239,7 @@ <h2 class="patent-properties-number">78</h2>
                 </button>
               </li>
 
-              <li class="news-title-item">
+              <li class="news-title-list-item">
                 <button class="news-title-button" type="button">
                   <label for="b">
                     Стандартизация деятельности клиник в соответствии с ISO
@@ -245,7 +247,7 @@ <h2 class="patent-properties-number">78</h2>
                   </label>
                 </button>
               </li>
-              <li class="news-title-item">
+              <li class="news-title-list-item">
                 <button class="news-title-button">
                   <label for="c">
                     Индивидуальный подход к каждому пациенту и подбор
@@ -261,9 +263,8 @@ <h3 class="news-plot-title">
                 Почему рекомендуется посещать профессионального косметолога.
                 Мнение специалистов центра
               </h3>
-              <ul class="news-plot-list">
+              <div class="news-plot-main">
                 <!-- TODO: класс news-plot-item нигде не используется в стилях, надо убрать весь неиспользуемый код -->
-                <li class="news-plot-item">
                   <p class="news-plot-description">
                     Процедуры аппаратной косметологии на оборудовании
                     экспертного класса от ведущих мировых производителей могут
@@ -272,16 +273,12 @@ <h3 class="news-plot-title">
                     купероз, потеря тонуса и упругости кожи, отечность,
                     целлюлит и т. п.
                   </p>
-                </li>
-                <li class="news-plot-item">
                   <p class="news-plot-description">
                     С помощью инъекционных методик мы можем разгладить
                     морщины, провести объёмное моделирование, увлажнить кожу,
                     ввести активные вещества в поверхностные и средние слои
                     кожи, запустить процессы омоложения.
                   </p>
-                </li>
-                <li class="news-plot-item">
                   <p class="news-plot-description">
                     Лазерное и фотоомоложение помогут запустить процесс
                     синтеза собственного коллагена, улучшить светооптические
@@ -289,14 +286,11 @@ <h3 class="news-plot-title">
                     подтяжки лица без уколов и длительного восстановительного
                     периода.
                   </p>
-                </li>
-                <li class="news-plot-item">
                   <p class="news-plot-description">
                     Курс процедур лазерной эпиляции поможет навсегда
                     избавиться от проблемы нежелательных волос.
                   </p>
-                </li>
-              </ul>
+                </div>
             </div>
             <div class="news-plot-content" id="b_2">
               <h3 class="news-plot-title">
@@ -310,35 +304,27 @@ <h3 class="news-plot-title">
                 на восемь основных принципов, которые успешно применяются в
                 <span>Medi</span>:
               </p>
-              <ul class="news-plot-list">
-                <li class="news-plot-item">
+              <div class="news-plot-main">
                   <p class="news-plot-description">
                     Сфокусированность на клиенте: Ориентация на потребителя в
                     центре внимания компании.
                   </p>
-                </li>
-                <li class="news-plot-item">
                   <p class="news-plot-description">
                     Участие персонала: Сотрудники должны понимать процессы в
                     компании, активно участвовать в них и приносить пользу
                     организации.
                   </p>
-                </li>
-                <li class="news-plot-item">
                   <p class="news-plot-description">
                     Непрерывное улучшение: Организация должна постоянно
                     стремиться к улучшению, включая обучение персонала и
                     улучшение качества услуг.
                   </p>
-                </li>
-                <li class="news-plot-item">
                   <p class="news-plot-description">
                     Системный подход к управлению: Управление компанией должно
                     быть рассмотрено как система для повышения ее
                     эффективности.
                   </p>
-                </li>
-              </ul>
+                </div>
             </div>
             <div class="news-plot-content" id="c_3">
               <h3 class="news-plot-title">
@@ -350,32 +336,24 @@ <h3 class="news-plot-title">
                 подходе к каждому клиенту. При необходимости мы готовы
                 предложить:
               </p>
-              <ul class="news-plot-list">
-                <li class="news-plot-item">
+              <div class="news-plot-main">
                   <p class="news-plot-description">
                     Заказ любого косметологического препарата из
                     сертифицированных на рынке.
                   </p>
-                </li>
-                <li class="news-plot-item">
                   <p class="news-plot-description">
                     Гибкая система скидок до 60&#37;
                   </p>
-                </li>
-                <li class="news-plot-item">
                   <p class="news-plot-description">
                     Формирование индивидуальной цены на процедуру, если
                     таковой нет в прайсе или она не может быть выполнена в
                     полном объёме.
                   </p>
-                </li>
-                <li class="news-plot-item">
                   <p class="news-plot-description">
                     И конечно же постоянная связь с врачом по личному номеру
                     телефона!
                   </p>
-                </li>
-              </ul>
+                </div>
             </div>
           </div>
         </div>
@@ -397,9 +375,9 @@ <h2>Актуальные спецпредложения</h2>
                 alt="Лазерное и фотоомоложение"
                 class="offers-img"
               />
-              <div class="offers-moreinfo">
-                <p class="offers-moreinfo-title">Лазерное и фотоомоложение</p>
-                <button class="offers-moreinfo-button" type="button"></button>
+              <div class="offers-more-info">
+                <p class="offers-more-info-title">Лазерное и фотоомоложение</p>
+                <button class="offers-more-info-button" type="button"></button>
               </div>
             </div>
             <div class="offers-name">
@@ -413,9 +391,9 @@ <h2>Актуальные спецпредложения</h2>
                 alt="Лазерное и фотоомоложение"
                 class="offers-img"
               />
-              <div class="offers-moreinfo">
-                <p class="offers-moreinfo-title">Лазерное и фотоомоложение</p>
-                <button class="offers-moreinfo-button" type="button"></button>
+              <div class="offers-more-info">
+                <p class="offers-more-info-title">Лазерное и фотоомоложение</p>
+                <button class="offers-more-info-button" type="button"></button>
               </div>
             </div>
             <div class="offers-name">
@@ -429,9 +407,9 @@ <h2>Актуальные спецпредложения</h2>
                 alt="Лазерное и фотоомоложение"
                 class="offers-img"
               />
-              <div class="offers-moreinfo">
-                <p class="offers-moreinfo-title">Лазерное и фотоомоложение</p>
-                <button class="offers-moreinfo-button" type="button"></button>
+              <div class="offers-more-info">
+                <p class="offers-more-info-title">Лазерное и фотоомоложение</p>
+                <button class="offers-more-info-button" type="button"></button>
               </div>
             </div>
             <div class="offers-name">
@@ -445,9 +423,9 @@ <h2>Актуальные спецпредложения</h2>
                 alt="Лазерное и фотоомоложение"
                 class="offers-img"
               />
-              <div class="offers-moreinfo">
-                <p class="offers-moreinfo-title">Лазерное и фотоомоложение</p>
-                <button class="offers-moreinfo-button" type="button"></button>
+              <div class="offers-more-info">
+                <p class="offers-more-info-title">Лазерное и фотоомоложение</p>
+                <button class="offers-more-info-button" type="button"></button>
               </div>
             </div>
           </div>
@@ -466,7 +444,9 @@ <h3 class="footer-services-title">Услуги</h3>
                   <a href="#" class="services-item-name">Косметология</a>
                 </li>
                 <li class="footer-services-item">
-                  <a href="#" class="services-item-name">Пластическая хирургия</a>
+                  <a href="#" class="services-item-name">
+                    Пластическая хирургия
+                  </a>
                 </li>
                 <li class="footer-services-item">
                   <a href="#" class="services-item-name">Стоматология</a>
@@ -483,7 +463,9 @@ <h3 class="footer-services-title">Услуги</h3>
                   <a href="#" class="services-item-name">Косметология</a>
                 </li>
                 <li class="footer-services-item">
-                  <a href="#" class="services-item-name">Пластическая хирургия</a>
+                  <a href="#" class="services-item-name">
+                    Пластическая хирургия
+                  </a>
                 </li>
                 <li class="footer-services-item">
                   <a href="#" class="services-item-name">Стоматология</a>
@@ -500,7 +482,9 @@ <h3 class="footer-services-title">Услуги</h3>
                   <a href="#" class="services-item-name">Косметология</a>
                 </li>
                 <li class="footer-services-item">
-                  <a href="#" class="services-item-name">Пластическая хирургия</a>
+                  <a href="#" class="services-item-name">
+                    Пластическая хирургия
+                  </a>
                 </li>
                 <li class="footer-services-item">
                   <a href="#" class="services-item-name">Стоматология</a>
@@ -517,7 +501,9 @@ <h3 class="footer-services-title">Услуги</h3>
                   <a href="#" class="services-item-name">Косметология</a>
                 </li>
                 <li class="footer-services-item">
-                  <a href="#" class="services-item-name">Пластическая хирургия</a>
+                  <a href="#" class="services-item-name">
+                    Пластическая хирургия
+                  </a>
                 </li>
                 <li class="footer-services-item">
                   <a href="#" class="services-item-name">Стоматология</a>
@@ -534,7 +520,9 @@ <h3 class="footer-services-title">Услуги</h3>
                   <a href="#" class="services-item-name">Косметология</a>
                 </li>
                 <li class="footer-services-item">
-                  <a href="#" class="services-item-name">Пластическая хирургия</a>
+                  <a href="#" class="services-item-name">
+                    Пластическая хирургия
+                  </a>
                 </li>
                 <li class="footer-services-item">
                   <a href="#" class="services-item-name">Стоматология</a>
@@ -551,7 +539,9 @@ <h3 class="footer-services-title">Услуги</h3>
                   <a href="#" class="services-item-name">Косметология</a>
                 </li>
                 <li class="footer-services-item">
-                  <a href="#" class="services-item-name">Пластическая хирургия</a>
+                  <a href="#" class="services-item-name">
+                    Пластическая хирургия
+                  </a>
                 </li>
                 <li class="footer-services-item">
                   <a href="#" class="services-item-name">Стоматология</a>
@@ -565,16 +555,10 @@ <h3 class="footer-services-title">Услуги</h3>
           <address class="footer-contacts-info">
             <div class="footer-info phone-number">
               <p class="footer-info-title">телефон</p>
-              <!-- TODO: контент в тегах размещай вот так, чтоб содержимое было на отдельной строке от тега, если нужно в несколько строк всё уместить
-                <a href="tel:+78121234567" class="footer-phone-link">
-                  +7 (812) 123-45-67
-                </a>
-
-                пробегись по всей хтмлке и пофиксь везде, так гораздо проще читается
-              -->
-              <a href="tel:+78121234567" class="footer-phone-link phone-number"
-                >+7 (812) 123-45-67</a
-              >
+              <!-- TODO: контент в тегах размещай вот так, чтоб содержимое было на отдельной строке от тега, если нужно в несколько строк всё уместить-->
+              <a href="tel:+78121234567" class="footer-phone-link phone-number">
+                +7 (812) 123-45-67
+              </a>
             </div>
             <div class="footer-info">
               <p class="footer-info-title">адрес</p>
@@ -582,9 +566,9 @@ <h3 class="footer-services-title">Услуги</h3>
               <a
                 href="https://2gis.ru/spb/geo/5348660212705500"
                 class="footer-address-link"
-                target="_blank"
-                >как проехать?</a
-              >
+                target="_blank">
+                как проехать?
+              </a>
             </div>
             <div class="footer-info">
               <p class="footer-info-title">адрес</p>
@@ -592,9 +576,9 @@ <h3 class="footer-services-title">Услуги</h3>
               <a
                 href="https://2gis.ru/spb/geo/5348660212737533?m=30.292537%2C59.954135%2F16"
                 class="footer-address-link"
-                target="_blank"
-                >как проехать?</a
-              >
+                target="_blank">
+                как проехать?
+              </a>
             </div>
           </address>
         </div>
@@ -606,14 +590,13 @@ <h2 class="visually-hidden">Способ связи с нашим салоном
             (c) 2021. Центр косметологии. Все права защищены. Наши сертификаты
             на осуществление деятельности. Патенты на использование технологий.
           </p>
-          <a href="#" class="footer-bottom-confidentiality"
-            >Политика конфиденциальности</a
-          >
+          <a href="#" class="footer-bottom-confidentiality">
+            Политика конфиденциальности
+          </a>
           <hr class="footer-separation" />
           <button class="poorvision-button" type="button">
             версия для слабовидящих
           </button>
-          
           <nav class="footer-bottom-menu">
             <ul class="footer-menu-list">
               <hr class="footer-separation" />
diff --git a/scss/_fonts.scss b/scss/_fonts.scss
new file mode 100644
index 0000000..efaf19b
--- /dev/null
+++ b/scss/_fonts.scss
@@ -0,0 +1,23 @@
+@font-face {
+    font-family: "Gilroy";
+    font-style: normal;
+    font-weight: 700;
+    src: url("../font/Gilroy-ExtraBold.otf") format("OpenType");
+    font-display: swap;
+  }
+  
+  @font-face {
+    font-family: "Gilroy";
+    font-style: light;
+    font-weight: 300;
+    src: url("../font/Gilroy-Light.otf") format("OpenType");
+    font-display: swap;
+  }
+  
+  @font-face {
+    font-family: "Gilroy";
+    font-style: normal;
+    font-weight: 400;
+    src: url("../font/gilroy-medium.ttf") format("OpenType");
+    font-display: swap;
+  }
\ No newline at end of file
diff --git a/scss/_footer.scss b/scss/_footer.scss
index 726dad7..1586543 100644
--- a/scss/_footer.scss
+++ b/scss/_footer.scss
@@ -27,6 +27,7 @@ footer {
 
             li {
                 margin-bottom: 15px;
+                display: inline-block;
 
                 a {
                     font-size: 14px;
@@ -36,7 +37,6 @@ footer {
 
                 a:hover {
                     /* TODO: при ховере увеличение размера фонта сдвигаются остальные элементы списка, т.к. увеличивают размер самого элемента. Нужно пофиксить, чтобы соседние элементы не сдвигались  */
-                    font-size: 16px;
                     color: var(--color-dark-blue);
                 }
             }
@@ -44,15 +44,48 @@ footer {
             li:last-child {
                 margin-bottom: 0;
             }
+
+            li:hover {
+                transform: scale(1.2);
+                transform-origin: left;
+            }
         }
 
         address {
             font-style: normal;
 
-            .footer-info:first-child{
+            .footer-info:first-child {
                 margin-bottom: 30px;
                 height: 55px;
             }
+
+            .footer-address-link {
+                background-color: var(--color-dark-blue);
+                color: var(--color-white);
+                padding: 15px 25px;
+                text-transform: uppercase;
+                font-size: 14px;
+                line-height: 16px;
+                font-weight: 300;
+            }
+
+            .footer-address-link:hover {
+                background-color: var(--color-blue);
+            }
+
+            .footer-phone-link:hover {
+                color: var(--color-blue);
+                border-bottom: 3mm ridge rgba($color: #4FBFA5, $alpha: 1.0);
+            }
+
+            .footer-address-name {
+                font-size: 21px;
+                line-height: 31px;
+                font-weight: 700;
+                margin-bottom: 15px;
+                color: var(--color-black);
+            }
+
             .footer-info {
                 margin-bottom: 30px;
                 height: 108px;
@@ -65,40 +98,11 @@ footer {
                     line-height: 16px;
                 }
 
-                .footer-phone-link:hover {
-                    color: var(--color-blue);
-                    border-bottom: 3mm ridge rgba($color: #4FBFA5, $alpha: 1.0);
-                }
-
-                .footer-address-name {
-                    font-size: 21px;
-                    line-height: 31px;
-                    font-weight: 700;
-                    margin-bottom: 15px;
-                    color: var(--color-black);
-                }
-
                 a {
                     font-size: 21px;
                     line-height: 31px;
                     font-weight: 700;
                 }
-
-
-
-                .footer-address-link {
-                    background-color: var(--color-dark-blue);
-                    color: var(--color-white);
-                    padding: 15px 25px;
-                    text-transform: uppercase;
-                    font-size: 14px;
-                    line-height: 16px;
-                    font-weight: 300;
-                }
-
-                .footer-address-link:hover {
-                    background-color: var(--color-blue);
-                }
             }
         }
     }
@@ -132,14 +136,15 @@ footer {
             text-transform: uppercase;
         }
 
-
         ul {
             display: flex;
             align-items: center;
+
             li {
                 width: 80px;
                 padding: 25px;
             }
+
             li:last-child {
                 width: 65px;
             }
diff --git a/scss/_header.scss b/scss/_header.scss
index df24fbc..5cab7a2 100644
--- a/scss/_header.scss
+++ b/scss/_header.scss
@@ -24,7 +24,6 @@
         white-space: nowrap;
     }
 
-
     .header-phone-link:hover {
         color: var(--color-dark-blue);
     }
diff --git a/scss/_introduction.scss b/scss/_introduction.scss
index b018638..b4eec5d 100644
--- a/scss/_introduction.scss
+++ b/scss/_introduction.scss
@@ -24,6 +24,11 @@
                 background-color: var(--color-blue);
             }
 
+            .innovation-button:hover {
+                background-color: var(--color-white);
+                color: var(--color-dark-blue);
+            }
+
             h3 {
                 padding-top: 105px;
                 font-size: 30px;
@@ -34,7 +39,7 @@
             }
 
             /* TODO: moreinfo это два слова, надо разделить */
-            .innovation-moreinfo {
+            .innovation-more-info {
                 display: flex;
                 align-items: center;
 
@@ -104,13 +109,15 @@
             background-color: var(--color-blue);
         }
 
+        .patent-button:hover {
+            background-color: var(--color-dark-blue);
+        }
+
         .patent-properties {
             display: flex;
             padding-top: 85px;
             justify-content: space-between;
-            /* почисти код от лишних пустых строк */
-
-
+     
             .patent-properties-list {
                 position: relative;
 
@@ -147,9 +154,6 @@
                 li:nth-of-type(2) {
                     bottom: 240px;
                 }
-                /* почисти код от лишних пустых строк */
-
-
 
                 li:hover {
                     margin: 0;
@@ -160,7 +164,7 @@
                 li:nth-of-type(1):hover {
                     margin: 0;
                     /* TODO: надо убрать топ, а то элемент вниз сдвигается */
-                    transform-origin: top left;
+                    transform-origin: left;
                     transform: scale(1.5);
                 }
 
@@ -174,12 +178,7 @@
                     width: 200px;
                 }
             }
-            /* почисти код от лишних пустых строк */
-
         }
-        /* почисти код от лишних пустых строк */
-
-
     }
 
     .introduction-news {
@@ -201,8 +200,6 @@
         input#b:checked~.news-plot #b_2 {
             display: block;
         }
-        /* почисти код от лишних пустых строк */
-
 
         input#b:checked~.news-title label[for=b] {
             background-color: var(--color-dark-blue);
@@ -228,23 +225,26 @@
             position: absolute;
         }
 
+        .news-button:hover {
+            background-color: var(--color-white);
+            color: var(--color-blue);
+        }
+
         .news-title-list {
             width: 526px;
             background-color: var(--color-blue);
             padding-top: 105px;
 
-            .news-title-item {
+            .news-title-list-item {
                 height: 139px;
                 display: flex;
                 /* TODO: почисти код от лишних пустых строк */
-
-
-
                 label {
                     width: 100%;
                     height: 100%;
                     padding: 40px 40px 0;
                     display: block;
+                    cursor: pointer;
                 }
 
                 .news-title-button {
@@ -261,6 +261,7 @@
         .news-plot-content {
             background-color: var(--color-light-blue);
             height: 522px;
+            display: none;
 
             h3 {
                 padding: 35px 60px 25px;
@@ -271,30 +272,27 @@
             .news-plot-subtitle {
                 font-size: 18px;
                 padding: 0 60px 20px;
+
                 span {
                     color: var(--color-dark-blue);
                 }
             }
 
-            .news-plot-list {
+            .news-plot-main {
                 padding: 0 60px 78px;
-
-                li {
-                    /* TODO: обрати внимание, что на макете точечки лишь немного выезжают за заголовок контента. Нужно пофикситью */
+                /* TODO: обрати внимание, что на макете точечки лишь немного выезжают за заголовок контента. Нужно пофикситью */
+                p {
+                    font-size: 14px;
+                    line-height: 21px;
                     position: relative;
-                    margin-bottom: 20px;
-
-                    p {
-                        font-size: 14px;
-                        line-height: 21px;
-                    }
+                    margin: 0 0 20px 17px;
                 }
 
-                li:last-of-type {
+                p:last-of-type {
                     margin-bottom: 0;
                 }
 
-                li::before {
+                p::before {
                     content: "";
                     position: absolute;
                     background-color: var(--color-dark-blue);
diff --git a/scss/_main-section.scss b/scss/_main-section.scss
index 4c8c816..8b3736f 100644
--- a/scss/_main-section.scss
+++ b/scss/_main-section.scss
@@ -15,11 +15,11 @@
             padding: 0;
             margin-right: 58px
         }/* TODO: отдели пустой строкой блоки со стилями */
+
         .main-nav-button:hover {
             border-bottom: 1px solid var(--color-white);
         }
         
-
         .main-nav-button:last-of-type {
             margin-right: 100px
         }
@@ -130,7 +130,6 @@
                     bottom: 13px;
                     left: 13px;
                 }
-                
             }
         }
     }
@@ -174,6 +173,4 @@
             min-width: 324px;
         }
     }
-
-
 }
\ No newline at end of file
diff --git a/scss/_offers.scss b/scss/_offers.scss
index 5e6f107..93a6501 100644
--- a/scss/_offers.scss
+++ b/scss/_offers.scss
@@ -40,9 +40,14 @@
                 left: 30px;
                 background-color: var(--color-blue);
             }
+
+            .offers-name-button:hover {
+                background-color: var(--color-dark-blue);
+            }
+
         }
 
-        .offers-moreinfo {
+        .offers-more-info {
             display: flex;
             background-color: var(--color-dark-blue);
             align-items: flex-end;
@@ -54,7 +59,7 @@
                 color: var(--color-white);
             }
 
-            .offers-moreinfo-button {
+            .offers-more-info-button {
                 margin: 37px 30px 37px 0;
                 position: relative;
                 width: 70px;
@@ -63,7 +68,7 @@
                 border: 1px solid var(--color-white);
             }
 
-            .offers-moreinfo-button::before {
+            .offers-more-info-button::before {
                 content: "";
                 position: absolute;
                 width: 31px;
@@ -73,7 +78,7 @@
                 left: 8px;
             }
 
-            .offers-moreinfo-button:hover {
+            .offers-more-info-button:hover {
                 background-color: var(--color-blue);
             }
         }
diff --git a/scss/_root.scss b/scss/_root.scss
new file mode 100644
index 0000000..9e56f84
--- /dev/null
+++ b/scss/_root.scss
@@ -0,0 +1,16 @@
+:root {
+    --color-blue: #4FBFA5;
+    --color-dark-blue: #00868A;
+    --color-light-blue: #ace2e450;
+    --color-white: #FFFFFF;
+    --color-black: #000000;
+    --color-light-gray: #C4C4C4;
+  
+    --font-family-base: "Gilroy", sans-serif;
+    --border: 1px solid var(--color-white);
+  
+    --container-width: 1295px;
+    --container-padding-x: 15px;
+  
+    --transition-duration: 0.2s;
+  }
\ No newline at end of file
diff --git a/scss/style.scss b/scss/style.scss
index c48f931..240ae49 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -119,7 +119,9 @@ body {
   /**
     Унифицированный интерлиньяж
    */
-  line-height: 1.5;
+   font-family: var(--font-family-base);
+   font-size: 18px;
+   line-height: 21px;
 }
 
 /**
@@ -141,56 +143,9 @@ svg * {
  */
 
  /* TODO: импорт шрифтов вынести в отдельный файл, чтобы не захломлять файл слитей */
- 
- @font-face {
-    font-family: "Gilroy";
-    font-style: normal;
-    font-weight: 700;
-    src: url("../font/Gilroy-ExtraBold.otf") format("OpenType");
-    font-display: swap;
-  }
-  
-  @font-face {
-    font-family: "Gilroy";
-    font-style: light;
-    font-weight: 300;
-    src: url("../font/Gilroy-Light.otf") format("OpenType");
-    font-display: swap;
-  }
-  
-  @font-face {
-    font-family: "Gilroy";
-    font-style: normal;
-    font-weight: 400;
-    src: url("../font/gilroy-medium.ttf") format("OpenType");
-    font-display: swap;
-  }
 
 /* TODO: переменные тоже лучше в отдельный файл вынести и учитывая, что мы используем scss, то будем использвать scss-переменные */
 
-:root {
-  --color-blue: #4FBFA5;
-  --color-dark-blue: #00868A;
-  --color-light-blue: #ace2e450;
-  --color-white: #FFFFFF;
-  --color-black: #000000;
-  --color-light-gray: #C4C4C4;
-
-  --font-family-base: "Gilroy", sans-serif;
-  --border: 1px solid var(--color-white);
-
-  --container-width: 1295px;
-  --container-padding-x: 15px;
-
-  --transition-duration: 0.2s;
-}
-
-body {
-  font-family: var(--font-family-base);
-  font-size: 18px;
-  line-height: 21px;
-}
-
 a {
   color: var(--color-black);
   text-decoration: none;
@@ -199,6 +154,7 @@ a {
 a, 
 button {
   transition-duration: var(--transition-duration);
+  cursor: pointer;
 }
 
 @import "_header";
@@ -206,6 +162,8 @@ button {
 @import "_introduction";
 @import "_offers";
 @import "_footer";
+@import "_root";
+@import "_fonts";
 
 .container {
   max-width: calc(var(--container-width) + var(--container-padding-x) * 2);
@@ -249,8 +207,4 @@ button {
   width: 25px;
   transform: translate(0, -50%);
   height: 18px;
-}
-
-.news-plot-content{
-    display: none;
 }
\ No newline at end of file