Save

layout/style-scss/o-nas.scss

@@ -404,6 +404,9 @@ p {
 			@include respond-below(sm) {
 				margin-bottom: 60px;
 			}
+			@include respond-below(xs) {
+				margin-bottom: 40px;
+			}
 
 			._col {
 				&-1 {
@@ -418,6 +421,11 @@ p {
 					padding-right: 80px;
 					margin-bottom: 60px;
 
+					@include respond-below(md) {
+						padding-left: 40px;
+						padding-right: 40px;
+					}
+
 					.timeline-nav--wrapper {
 						&::before {
 							content: '';
@@ -427,10 +435,18 @@ p {
 							width: 100%;
 							background: #000000;
 							transform: translateY(-50%);
+
+							@include respond-below(md) {
+								bottom: 12px;
+							}
 						}
 						.swiper-wrapper {
 							align-items: end;
 							min-height: 140px;
+
+							@include respond-below(md) {
+								min-height: 100px;
+							}
 						}
 
 						.swiper-slide {
@@ -439,12 +455,44 @@ p {
 							flex: 0 0 calc(100% / 8);
 							transition: all 0.3s ease;
 
+							@include respond-below(lg) {
+								flex: 0 0 calc(100% / 6);
+							}
+							@include respond-below(md) {
+								flex: 0 0 calc(100% / 5);
+							}
+							@include respond-below(sm) {
+								flex: 0 0 calc(100% / 4);
+							}
+							@include respond-below(xs) {
+								flex: 0 0 calc(100% / 3);
+							}
+
 							&.active {
 								flex: 0 0 calc((100% / 8) * 2);
 								// flex: 0 0 200px;
 
+								@include respond-below(lg) {
+									flex: 0 0 calc((100% / 6) * 2);
+								}
+								@include respond-below(md) {
+									flex: 0 0 calc((100% / 5) * 2);
+								}
+								@include respond-below(sm) {
+									flex: 0 0 calc((100% / 4) * 2);
+								}
+								@include respond-below(xs) {
+									flex: 0 0 calc((100% / 3) * 2);
+								}
+
 								span {
 									font-size: 64px;
+									@include respond-below(md) {
+										font-size: 50px;
+									}
+									@include respond-below(sm) {
+										font-size: 40px;
+									}
 								}
 
 								.slide-dot {
@@ -461,6 +509,13 @@ p {
 								text-transform: uppercase;
 								margin-bottom: 30px;
 								transition: all 0.3s ease;
+
+								@include respond-below(md) {
+									font-size: 30px;
+								}
+								@include respond-below(sm) {
+									font-size: 26px;
+								}
 							}
 							.slide-dot {
 								width: 40px;
@@ -470,6 +525,11 @@ p {
 								background: #fff;
 								border-radius: 100px;
 								transition: all 0.3s ease;
+
+								@include respond-below(md) {
+									width: 30px;
+									height: 30px;
+								}
 							}
 						}
 					}
@@ -493,6 +553,12 @@ p {
 						&.swiper-button-disabled {
 							opacity: 0.3;
 						}
+
+						@include respond-below(md) {
+							width: 30px;
+							min-width: 30px;
+							height: 30px;
+						}
 					}
 					.timeline-prev {
 						left: 0;
@@ -976,6 +1042,10 @@ p {
 .box-8 {
 	padding-bottom: 150px;
 
+	@include respond-below(sm) {
+		padding-bottom: 100px;
+	}
+
 	._row {
 		&-1 {
 			margin-bottom: 70px;
@@ -1481,7 +1551,7 @@ p {
 								width: 100%;
 								max-width: fit-content;
 
-								@include respond-below(xs) {
+								@include respond-below(sm) {
 									max-width: 50px;
 								}
 							}
@@ -1496,6 +1566,10 @@ p {
 .box-15 {
 	margin-bottom: 150px;
 
+	@include respond-below(md) {
+		margin-bottom: 100px;
+	}
+
 	._row {
 		&-1 {
 			._col {
@@ -1509,6 +1583,10 @@ p {
 						text-align: center;
 						text-transform: uppercase;
 						margin-bottom: 35px;
+
+						@include respond-below(xs) {
+							font-size: 28px;
+						}
 					}
 
 					p {
@@ -1520,6 +1598,10 @@ p {
 						text-align: center;
 						text-transform: uppercase;
 						margin-bottom: 35px;
+
+						@include respond-below(xs) {
+							font-size: 18px;
+						}
 					}
 
 					ul {
@@ -1575,6 +1657,10 @@ p {
 	border-top: 1px solid $cBlack;
 	margin-bottom: 80px;
 
+	@include respond-below(md) {
+		padding-top: 100px;
+	}
+
 	._row {
 		&-1 {
 			._col {
@@ -1587,6 +1673,10 @@ p {
 						letter-spacing: 2px;
 						margin-bottom: 40px;
 						text-transform: uppercase;
+
+						@include respond-below(xs) {
+							font-size: 28px;
+						}
 					}
 					p {
 						color: $cTxtBlack;
@@ -1594,6 +1684,10 @@ p {
 						font-family: $font3;
 						font-weight: 300;
 						margin-bottom: 40px;
+
+						@include respond-below(xs) {
+							font-size: 18px;
+						}
 					}
 
 					a {