feat: add plane to stage section

MIU-cz · Jun 26, 2024 · 0c37349 · 0c37349
1 parent 2a89155
commit 0c37349
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 13 deletions.
diff --git a/Yandex/src/css/main.css b/Yandex/src/css/main.css
@@ -703,9 +703,13 @@
   }
 }
 .content_stage .stage_title {
-  width: 66.66%;
   position: relative;
 }
+@media (min-width: 768px) {
+  .content_stage .stage_title {
+    width: 66.66%;
+  }
+}
 .content_stage .stage_title .txt_main_dsc {
   padding: 12px 0 0;
 }
@@ -727,6 +731,22 @@
     padding: 54px 0 0;
   }
 }
+.content_stage .stage_stages::after {
+  content: url(../img/main/img-plane.svg);
+  display: block;
+  position: absolute;
+  top: -5%;
+  right: -10%;
+}
+@media (min-width: 768px) {
+  .content_stage .stage_stages::after {
+    width: -moz-max-content;
+    width: max-content;
+    top: auto;
+    bottom: -5%;
+    right: -7%;
+  }
+}
 .content_stage .stage_stages .stages_wraper {
   counter-reset: stages;
   display: grid;
@@ -786,7 +806,7 @@
     grid-row: span 1;
   }
   .content_stage .stage_stages .stage_item:nth-child(7) span {
-    width: 65%;
+    width: 55%;
   }
 }
 

diff --git a/Yandex/src/css/main.css.map b/Yandex/src/css/main.css.map
diff --git a/Yandex/src/css/main.scss b/Yandex/src/css/main.scss
@@ -443,9 +443,12 @@
 	}
 
 	.stage_title {
-		width: 66.66%;
 		position: relative;
 
+		@media (min-width:768px) {
+			width: 66.66%;
+		}
+
 		.txt_main_dsc {
 			padding: 12px 0 0;
 
@@ -467,6 +470,22 @@
 			padding: 54px 0 0;
 		}
 
+		// ### plane ###
+		&::after {
+			content: url(../img/main/img-plane.svg);
+			display: block;
+			position: absolute;
+			top: -5%;
+			right: -10%;
+
+			@media (min-width: 768px) {
+				width: max-content;
+				top: auto;
+				bottom: -5%;
+				right: -7%;
+			}
+		}
+
 		.stages_wraper {
 			counter-reset: stages;
 			display: grid;
@@ -476,11 +495,11 @@
 			grid-auto-columns: 100%;
 			grid-template-rows: repeat(2, 150px);
 
-			@media (min-width: 768px) {		
+			@media (min-width: 768px) {
 				grid-auto-flow: row;
-				grid-template-rows: auto;		
+				grid-template-rows: auto;
 				grid-template-columns: repeat(12, 1fr);
-				
+
 				gap: 20px;
 			}
 		}
@@ -506,21 +525,20 @@
 				font-weight: 600;
 				align-items: center;
 				justify-content: center;
-
 			}
 
 			&:nth-child(3):nth-child(4):nth-child(7) {
 				grid-row: span 2;
 			}
-			
+
 			&:not(:nth-child(2)):not(:nth-child(5)) {
 				padding: 64px 20px 20px;
 			}
 
 			// &:nth-child(n+2) {
 			// 	display: none;
 			// }
-			
+
 			@media (min-width: 768px) {
 				padding: 20px !important;
 				grid-column: span 4;
@@ -539,11 +557,9 @@
 					grid-row: span 1;
 
 					span {
-						width: 65%;
+						width: 55%;
 					}
 				}
-
-
 			}
 		}
 	}