feat: add stage grid + media

Yandex/index.html

@@ -696,6 +696,25 @@ <h1 class="txt_header_h">Превратите уездный город
 					</tr>
 				</table>
 			</section>
+
+			<section class="content content_stage">
+				<div class="stage_title">
+					<h2 class="txt_main_h">Этапы преображения Васюков</h2>
+					<span class="txt_main_dsc">Будущие источники обогащения васюкинцев</span>
+				</div>
+
+				<div class="stage_stages">
+					<ol class="stages_wraper txt_main_grid">
+						<li class="stage_item">Строительство железнодорожной магистрали Москва-Васюки</li>
+						<li class="stage_item">Открытие фешенебельной гостиницы «Проходная пешка» и других небоскрёбов</li>
+						<li class="stage_item">Поднятие сельского хозяйства в радиусе на тысячу километров: производство овощей, фруктов, икры, шоколадных конфет</li>
+						<li class="stage_item">Строительство дворца для турнира</li>
+						<li class="stage_item">Размещение гаражей для гостевого автотранспорта</li>
+						<li class="stage_item">Постройка сверхмощной радиостанции для передачи всему миру сенсационных результатов</li>
+						<li class="stage_item"><span>Создание аэропорта «Большие Васюки» с регулярным отправлением почтовых самолётов и дирижаблей во все концы света, включая Лос-Анжелос и Мельбурн</span></li>
+					</ol>
+				</div>
+			</section> 
 		</main>
 
 		<footer>

Yandex/src/autor-resourse/my-normaliz-style-min.css

@@ -56,7 +56,8 @@ a:visited {
 	text-decoration: none;
 }
 
-ul li {
+ul li,
+ol li {
 	list-style: none;
 }
 

Yandex/src/css/_Theme.scss

@@ -89,6 +89,7 @@ $c-bg-header: #e9ded4;
 
 .txt_main_h {
 	@include fontStyle($fsz: 36px, $lh: 120%);
+	text-transform: uppercase;
 
 	@media (min-width: 1366px) {
 		font-size: 54px;

Yandex/src/css/main.css

@@ -147,6 +147,7 @@
   letter-spacing: normal;
   line-height: 120%;
   color: #313131;
+  text-transform: uppercase;
 }
 @media (min-width: 1366px) {
   .txt_main_h {
@@ -693,6 +694,102 @@
   }
 }
 
+.content_stage {
+  padding-top: 120px;
+}
+@media (min-width: 1366px) {
+  .content_stage {
+    padding-top: 200px;
+  }
+}
+.content_stage .stage_title {
+  width: 66.66%;
+  position: relative;
+}
+.content_stage .stage_title .txt_main_dsc {
+  padding: 12px 0 0;
+}
+@media (min-width: 1366px) {
+  .content_stage .stage_title .txt_main_dsc {
+    padding: 0;
+    width: 33.33%;
+    position: absolute;
+    bottom: 10px;
+    left: 37%;
+  }
+}
+.content_stage .stage_stages {
+  padding: 148px 0 0;
+  position: relative;
+}
+@media (min-width: 1366px) {
+  .content_stage .stage_stages {
+    padding: 54px 0 0;
+  }
+}
+.content_stage .stage_stages .stages_wraper {
+  counter-reset: stages;
+  display: grid;
+  overflow: hidden;
+  grid-auto-flow: column;
+  grid-auto-columns: 100%;
+  grid-template-rows: repeat(2, 150px);
+}
+@media (min-width: 768px) {
+  .content_stage .stage_stages .stages_wraper {
+    grid-auto-flow: row;
+    grid-template-rows: auto;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 20px;
+  }
+}
+.content_stage .stage_stages .stage_item {
+  display: flex;
+  gap: 16px;
+  counter-increment: stages;
+  padding: 20px;
+  background: url(../img/header/bg-color-burn.png) center #e9ded4;
+  background-blend-mode: color-burn;
+}
+.content_stage .stage_stages .stage_item::before {
+  content: counter(stages);
+  display: flex;
+  min-width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: #ffffff;
+  font-weight: 600;
+  align-items: center;
+  justify-content: center;
+}
+.content_stage .stage_stages .stage_item:nth-child(3):nth-child(4):nth-child(7) {
+  grid-row: span 2;
+}
+.content_stage .stage_stages .stage_item:not(:nth-child(2)):not(:nth-child(5)) {
+  padding: 64px 20px 20px;
+}
+@media (min-width: 768px) {
+  .content_stage .stage_stages .stage_item {
+    padding: 20px !important;
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+  .content_stage .stage_stages .stage_item:nth-child(3) {
+    grid-row: span 2;
+  }
+  .content_stage .stage_stages .stage_item:nth-child(4) {
+    grid-row: span 1;
+  }
+  .content_stage .stage_stages .stage_item:nth-child(7) {
+    grid-column: span 8;
+    grid-row: span 1;
+  }
+  .content_stage .stage_stages .stage_item:nth-child(7) span {
+    width: 65%;
+  }
+}
+
 .footer_content {
   width: 100%;
   padding: 40px 20px;