Проверка

gadjster · Mar 1, 2024 · 2ddddf4 · 2ddddf4
1 parent 9869fb9
commit 2ddddf4
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -150,7 +150,9 @@ <h3 class="title title__h-decor">
             </h3>
           </li>
           <li class="container--3-items">
-            <h4 class="title title__h-decor">Представьте небо и облака</h4>
+            <h4 class="title title__h-decor header__4">
+              Представьте небо и облака
+            </h4>
             <p class="text__block">
               Или листья в ручье. Тут дело в лёгкой медитации, которая помогает
               успокоиться. Ведь часто именно тревожные мысли о сложных задачах
@@ -163,7 +165,7 @@ <h4 class="title title__h-decor">Представьте небо и облака
             </p>
           </li>
           <li class="container--3-items">
-            <h4 class="title title__h-decor">Включите музыку</h4>
+            <h4 class="title title__h-decor header__4">Включите музыку</h4>
             <p class="text__block">
               Но не любую, и не любимую. Любимая может быть связана с сильными
               положительными эмоциями, которые тоже очень сильно отвлекают.
@@ -172,7 +174,7 @@ <h4 class="title title__h-decor">Включите музыку</h4>
             </p>
           </li>
           <li class="container--3-items">
-            <h4 class="title title__h-decor">Прогуляйтесь</h4>
+            <h4 class="title title__h-decor header__4">Прогуляйтесь</h4>
             <p class="text__block">
               Или даже пробегитесь. Лучше найти парк или лес: один эксперимент
               <a
@@ -189,7 +191,7 @@ <h4 class="title title__h-decor">Прогуляйтесь</h4>
             </p>
           </li>
           <li class="container--3-items">
-            <h4 class="title title__h-decor">Хорошо ешьте</h4>
+            <h4 class="title title__h-decor header__4">Хорошо ешьте</h4>
             <p class="text__block">
               Мы — не ваша бабушка, но это правда важно. Выбирайте продукты,
               которые препятствуют резким скачкам сахара в крови. Например, с
@@ -198,7 +200,7 @@ <h4 class="title title__h-decor">Хорошо ешьте</h4>
             </p>
           </li>
           <li>
-            <h4 class="title title__h-decor">Читайте</h4>
+            <h4 class="title title__h-decor header__4">Читайте</h4>
             <p class="text__block">
               Настоящие бумажные книги. Это правда помогает с концентрацией:
               чтобы прочитать пост в соцсети, достаточно нескольких минут или

diff --git a/styles/style.css b/styles/style.css
@@ -238,6 +238,10 @@
   background-color: var(--accent-color, #ff0070);
 }
 
+.header__4 {
+  font-weight: 400;
+}
+
 .text__block {
   width: 100%;
   margin-block-start: 10px;

diff --git a/styles/variables.css b/styles/variables.css
@@ -21,12 +21,12 @@
     justify-self: flex-end;
     align-self: self-end;
     margin-inline-end: 20px;
-    margin-block-start: 15px;
+    margin-block-start: 4px;
   }
 
   .header__title {
-    margin-block-start: 77px;
-    margin-block-end: 68px;
+    margin-block-start: 86px;
+    margin-block-end: 73px;
   }
 
   .header__text-block {
@@ -57,11 +57,16 @@
   }
 
   .container--3 {
-    grid-template-columns: minmax(calc(100vmin / 3 - 28px), 315px) minmax(
-        calc(100vmin * 2 / 3 - 30px),
+    margin-block-start: 10px;
+    grid-template-columns: minmax(calc(100vmin / 3 - 20px), 315px) minmax(
+        calc(100vmin * 2 / 3 - 40px),
         650px
       );
-    column-gap: 18px;
+    column-gap: 20px;
+  }
+  .container--img {
+    margin-block-start: 7px;
+    margin-block-end: 65px;
   }
 
   .card-vert-block {
@@ -72,8 +77,8 @@
 @media (max-device-width: 375px) {
   .header__title {
     margin-inline-start: 10px;
-    margin-block-start: 43px;
-    margin-block-end: 16px;
+    margin-block-start: 38px;
+    margin-block-end: 18px;
     font-size: clamp(7.25rem, 7.0115rem + 1.0178vw, 7.5rem);
   }
 
@@ -86,7 +91,7 @@
     justify-self: flex-end;
     align-self: self-end;
     margin-inline-end: 10px;
-    margin-block-start: 15px;
+    margin-block-start: 21px;
     margin-block-end: 0;
   }
 
@@ -144,10 +149,16 @@
   }
 
   .container--2 {
+    margin-block-start: 30px;
     grid-template-columns: 1fr;
   }
 
+  .card__row-title {
+    max-width: 260px;
+  }
+
   .container--3 {
+    margin-block-start: 1px;
     grid-template-columns: 1fr;
     gap: 0;
   }
@@ -166,7 +177,8 @@
     grid-template-columns: calc(100vmin - 20px);
     row-gap: 10px;
     column-gap: 0;
-    margin-block-start: 9px;
+    margin-block-start: 0;
+    margin-block-end: 12px;
   }
 
   .block--1 {