PP 1024px

index.html

@@ -101,32 +101,30 @@ <h3 class="title text-decor container--what-block">Многозадачност
           заставляет наш мозг постоянно &laquo;сканировать&raquo; окружающую
           среду на&nbsp;предмет опасности. Например, читать новости вместо
           работы. Но&nbsp;быть собранными всё время&nbsp;&mdash; невозможно.
-          Концентрация&nbsp;&mdash; мышца, и&nbsp;она может не&nbsp;выдержать,
-          если не&nbsp;давать ей&nbsp;отдохнуть.
+          Концентрация&nbsp;&mdash; мышца, и&nbsp;она может&nbsp;не выдержать,
+          если не&nbsp;давать&nbsp;ей отдохнуть.
         </p>
         <h3 class="title text-decor container--what-block">Еда</h3>
         <p class="text__block container--what-block">
           &laquo;Быстрые углеводы&raquo;&nbsp;&mdash; сахар, белый хлеб,
           сладости&nbsp;&mdash; молниеносно доставляют в&nbsp;мозг энергию
           и&nbsp;помогают ему лучше работать. Но&nbsp;уходит эта энергия также
-          быстро, как и&nbsp;приходит. А&nbsp;мы&nbsp;в&nbsp;результате попадаем
+          быстро, как&nbsp;и приходит. А&nbsp;мы&nbsp;в&nbsp;результате попадаем
           на&nbsp;&laquo;углеводные качели&raquo;: как только действие
           &laquo;быстрых углеводов&raquo; заканчивается, мы&nbsp;чувствуем
-          усталость и&nbsp;сонливость. И&nbsp;хотим ещё больше быстрых
-          углеводов.
+          усталость и&nbsp;сонливость. И хотим ещё больше быстрых углеводов.
         </p>
         <h3 class="title text-decor container--what-block">Гаджеты</h3>
         <p class="text__block container--what-block">
           Да-да, это та&nbsp;самая ситуация, когда на&nbsp;экране
-          ноутбука&nbsp;&mdash; код, в&nbsp;наушниках&nbsp;&mdash; подкаст,
-          а&nbsp;на&nbsp;компьютере фоном&nbsp;&mdash; ещё и&nbsp;видео
-          с&nbsp;забавными утятами. В&nbsp;результате мозг пытается
-          переключиться с&nbsp;одной задачи на&nbsp;другую&nbsp;&mdash;
-          и&nbsp;просто не&nbsp;может. А&nbsp;чтобы вернуться к&nbsp;состоянию
-          полной концентрации, человеку в&nbsp;среднем нужно 20&nbsp;минут. Вот
-          и&nbsp;получается, что чем больше времени мы&nbsp;проводим
-          в&nbsp;гаджетах, тем больше времени затем нужно, чтобы вернуться
-          к&nbsp;работе.
+          ноутбука&nbsp;&mdash; код, в&nbsp;наушниках&nbsp;&mdash; подкаст, а
+          на&nbsp;компьютере фоном&nbsp;&mdash; ещё&nbsp;и видео
+          с&nbsp;забавными утятами. В результате мозг пытается переключиться
+          с&nbsp;одной задачи на&nbsp;другую&nbsp;&mdash; и просто не может.
+          А&nbsp;чтобы вернуться к состоянию полной концентрации, человеку в
+          среднем нужно 20&nbsp;минут. Вот&nbsp;и получается, что чем больше
+          времени мы&nbsp;проводим&nbsp;в гаджетах, тем больше времени затем
+          нужно, чтобы вернуться к&nbsp;работе.
         </p>
       </section>
       <section class="container container--how">
@@ -140,15 +138,14 @@ <h3 class="title text-decor">
         <h4 class="title text-decor">Представьте небо и&nbsp;облака</h4>
         <p class="text__block">
           Или листья в&nbsp;ручье. Тут дело в&nbsp;лёгкой медитации, которая
-          помогает успокоиться. Ведь часто именно тревожные мысли о&nbsp;сложных
+          помогает успокоиться. Ведь часто именно тревожные мысли&nbsp;о сложных
           задачах как раз и&nbsp;мешают эти сложные задачи делать. В&nbsp;такие
           моменты можно закрыть глаза и&nbsp;представить, что чистое
           небо&nbsp;&mdash; это&nbsp;вы, а&nbsp;облака&nbsp;&mdash; тревожные
-          мысли. И&nbsp;сколько&nbsp;бы их&nbsp;ни&nbsp;было&nbsp;&mdash; ясное
-          небо всегда будет где-то там, за&nbsp;тучами, и&nbsp;никуда
-          не&nbsp;денется. Это упражнение поможет вернуться в&nbsp;настоящий
-          момент, а&nbsp;не&nbsp;волноваться о&nbsp;потенциальных проблемах
-          из&nbsp;будущего.
+          мысли. И сколько бы их&nbsp;ни&nbsp;было&nbsp;&mdash; ясное небо
+          всегда будет где-то там, за тучами, и&nbsp;никуда не&nbsp;денется. Это
+          упражнение поможет вернуться в&nbsp;настоящий момент,
+          а&nbsp;не&nbsp;волноваться о потенциальных проблемах из&nbsp;будущего.
         </p>
         <h4 class="title text-decor">Включите музыку</h4>
         <p class="text__block">
@@ -177,16 +174,16 @@ <h4 class="title text-decor">Прогуляйтесь</h4>
         <h4 class="title text-decor">Хорошо ешьте</h4>
         <p class="text__block">
           Мы&nbsp;&mdash; не&nbsp;ваша бабушка, но&nbsp;это правда важно.
-          Выбирайте продукты, которые препятствуют резким скачкам сахара
-          в&nbsp;крови. Например, с&nbsp;высоким содержанием клетчатки: овощи,
-          ягоды, бобовые (нут, чечевица, фасоль), коричневый рис, хлеб
+          Выбирайте продукты, которые препятствуют резким скачкам сахара в
+          крови. Например, с&nbsp;высоким содержанием клетчатки: овощи, ягоды,
+          бобовые (нут, чечевица, фасоль), коричневый рис, хлеб
           из&nbsp;цельнозерновой пшеницы.
         </p>
         <h4 class="title text-decor">Читайте</h4>
         <p class="text__block">
-          Настоящие бумажные книги. Это правда помогает с&nbsp;концентрацией:
-          чтобы прочитать пост в&nbsp;соцсети, достаточно нескольких минут или
-          даже секунд. А&nbsp;вот интересная книга способна затянуть
+          Настоящие бумажные книги. Это правда помогает с концентрацией: чтобы
+          прочитать пост в&nbsp;соцсети, достаточно нескольких минут или даже
+          секунд. А&nbsp;вот интересная книга способна затянуть
           и&nbsp;на&nbsp;несколько часов и&nbsp;круто тренирует направленное
           внимание.
         </p>

styles/style.css

@@ -68,7 +68,7 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  gap: 23px;
+  gap: 12px;
 }
 
 .header__theme-menu-button {
@@ -84,6 +84,7 @@
   text-transform: lowercase;
   background-color: transparent;
   cursor: pointer;
+  padding: 3px 13px;
 }
 
 .header__theme-menu-button:hover {
@@ -99,20 +100,25 @@
 }
 
 .header__title {
+  display: flex;
   justify-self: flex-start;
   align-self: center;
   text-shadow: 4px 4px 0px var(--accent-color, #ff0070);
+  height: 1em;
+  margin-block-start: 76px;
+  margin-block-end: 19px;
 }
 
 .header__text {
   justify-self: flex-end;
-  align-self: start;
+  align-self: flex-start;
   max-width: 491px;
   font-family: var(--mainfont, sans-serif);
   font-weight: 700;
   font-size: 18px;
   font-style: normal;
   line-height: 130%;
+  margin-inline-end: 20px;
 }
 
 .decor__element {
@@ -261,16 +267,16 @@
   grid-row-end: 15;
 }
 
-.container--how > .title:first-of-type {
-  margin-block-end: 17px;
+.container--how > .title:nth-child(2) {
+  margin-block-end: 20px;
 }
 
 .container--img {
   grid-template-columns: minmax(auto, 315px) minmax(auto, 315px) minmax(
       auto,
       315px
     );
-  gap: 20px;
+  gap: 17px;
 }
 
 .container--img-title {
@@ -314,10 +320,14 @@
   font-size: 18px;
   font-style: normal;
   line-height: 130%; /* 23.4px */
-  padding-block-start: 9px;
+  padding-block-start: 10px;
   padding-block-end: 20px;
 }
 
+.text__block:last-of-type {
+  padding-block-end: 0;
+}
+
 .mini-block .title {
   margin-block-end: 20px;
 }