Enhance responsive typography and spacing in o-nas.scss

- Adjusted font sizes for various elements at different breakpoints to improve readability on smaller screens.
- Modified padding and margin values to create better spacing and layout consistency across different device sizes.
- Implemented responsive design principles using mixins for better adaptability to screen sizes.

layout/style-scss/o-nas.scss

@@ -51,6 +51,10 @@ p {
 		padding-right: 30px;
 		padding-top: 3px;
 		background: $cWhite;
+
+		@include respond-below(md) {
+			font-size: 26px;
+		}
 	}
 }
 
@@ -107,6 +111,10 @@ p {
 								max-width: 390px;
 							}
 						}
+
+						@include respond-below(sm) {
+							font-size: 44px;
+						}
 					}
 					h2 {
 						color: $cTxtBlack;
@@ -116,6 +124,10 @@ p {
 						line-height: 1.2;
 						font-weight: 300;
 						text-transform: uppercase;
+
+						@include respond-below(sm) {
+							font-size: 24px;
+						}
 					}
 				}
 
@@ -134,6 +146,10 @@ p {
 			margin-top: 34px;
 			margin-bottom: 72px;
 
+			@include respond-below(sm) {
+				font-size: 42px;
+			}
+
 			._col {
 				&-1 {
 					position: relative;
@@ -188,6 +204,10 @@ p {
 	background-size: cover;
 	padding: 86px 0 90px;
 
+	@include respond-below(sm) {
+		padding: 50px 0 90px;
+	}
+
 	._row {
 		&-1 {
 			margin-bottom: 50px;
@@ -208,6 +228,13 @@ p {
 						strong {
 							font-weight: 600;
 						}
+
+						@include respond-below(md) {
+							font-size: 20px;
+						}
+						@include respond-below(sm) {
+							font-size: 18px;
+						}
 					}
 				}
 				&-2 {
@@ -251,6 +278,9 @@ p {
 							@include respond-above(md) {
 								margin-left: 44px;
 							}
+							@include respond-below(md) {
+								font-size: 18px;
+							}
 						}
 						h3 {
 							color: $cWhite;
@@ -266,6 +296,14 @@ p {
 							padding: 16px 44px 9px;
 							border-radius: 50px;
 							background: rgba(#2e2d2c, 0.8);
+
+							@include respond-below(md) {
+								font-size: 24px;
+								line-height: 1.3;
+							}
+							@include respond-below(sm) {
+								font-size: 18px;
+							}
 						}
 					}
 				}
@@ -278,6 +316,10 @@ p {
 	margin-top: -50px;
 	margin-bottom: 130px;
 
+	@include respond-below(sm) {
+		margin-bottom: 100px;
+	}
+
 	._row {
 		&-1 {
 			._col {
@@ -323,6 +365,10 @@ p {
 								font-weight: 600;
 								margin-bottom: 3px;
 								text-transform: uppercase;
+
+								@include respond-below(md) {
+									font-size: 16px;
+								}
 							}
 
 							p {
@@ -331,6 +377,10 @@ p {
 								font-family: $font3;
 								font-weight: 300;
 								text-transform: uppercase;
+
+								@include respond-below(md) {
+									font-size: 16px;
+								}
 							}
 						}
 					}
@@ -343,10 +393,18 @@ p {
 .box-4 {
 	margin-bottom: 160px;
 
+	@include respond-below(sm) {
+		margin-bottom: 100px;
+	}
+
 	._row {
 		&-1 {
 			margin-bottom: 100px;
 
+			@include respond-below(sm) {
+				margin-bottom: 60px;
+			}
+
 			._col {
 				&-1 {
 				}
@@ -489,6 +547,9 @@ p {
 	._row {
 		&-1 {
 			margin-bottom: 70px;
+			@include respond-below(sm) {
+				margin-bottom: 40px;
+			}
 		}
 		&-2 {
 			width: 100%;
@@ -505,6 +566,10 @@ p {
 						font-family: $font3;
 						font-weight: 300;
 
+						@include respond-below(md) {
+							font-size: 18px;
+						}
+
 						strong {
 							font-weight: 600;
 						}
@@ -520,9 +585,20 @@ p {
 						flex-direction: row;
 						column-gap: 30px;
 
+						@include respond-below(md) {
+							flex-wrap: wrap;
+							justify-content: center;
+							row-gap: 30px;
+						}
+
 						.offer-tile {
 							width: calc(100% / 5 - (30px - (30px / 5)));
 
+							@include respond-below(md) {
+								width: calc(100% / 2 - (30px - (30px / 2)));
+								max-width: 240px;
+							}
+
 							img {
 								display: block;
 								margin-left: auto;
@@ -538,6 +614,10 @@ p {
 								text-align: center;
 								text-transform: uppercase;
 								margin-bottom: 20px;
+
+								@include respond-between(md, lg) {
+									font-size: 19px;
+								}
 							}
 
 							ul {
@@ -640,6 +720,10 @@ p {
 						text-transform: uppercase;
 						margin-bottom: 40px;
 
+						@include respond-below(md) {
+							font-size: 23px;
+						}
+
 						strong {
 							font-weight: 800;
 							display: block;
@@ -651,6 +735,10 @@ p {
 						font-family: $font3;
 						font-weight: 300;
 						max-width: 370px;
+
+						@include respond-below(md) {
+							font-size: 18px;
+						}
 					}
 				}
 
@@ -676,10 +764,19 @@ p {
 							line-height: 26px;
 							text-transform: uppercase;
 
+							@include respond-below(md) {
+								font-size: 14px;
+								padding: 16px 30px 11px;
+							}
+
 							strong {
 								display: block;
 								font-size: 25px;
 								font-weight: 700;
+
+								@include respond-below(md) {
+									font-size: 20px;
+								}
 							}
 
 							&:first-child {
@@ -716,6 +813,10 @@ p {
 						font-family: $font3;
 						font-weight: 300;
 
+						@include respond-below(md) {
+							font-size: 18px;
+						}
+
 						strong {
 							font-weight: 600;
 						}
@@ -733,6 +834,10 @@ p {
 			flex-direction: row;
 			gap: 26px;
 
+			@include respond-below(md) {
+				gap: 16px;
+			}
+
 			._col {
 				&-1 {
 				}
@@ -746,6 +851,10 @@ p {
 					flex-direction: column;
 					gap: 26px;
 
+					@include respond-below(md) {
+						gap: 16px;
+					}
+
 					li.img-tile {
 						position: relative;
 
@@ -769,10 +878,25 @@ p {
 							text-align: center;
 							text-transform: uppercase;
 
+							@include respond-below(md) {
+								font-size: 20px;
+							}
+
+							@include respond-below(sm) {
+								font-size: 18px;
+							}
+
 							strong {
 								display: block;
 								font-size: 35px;
 								font-weight: 700;
+
+								@include respond-below(md) {
+									font-size: 25px;
+								}
+								@include respond-below(sm) {
+									font-size: 20px;
+								}
 							}
 						}
 					}
@@ -804,6 +928,10 @@ p {
 						font-family: $font3;
 						font-weight: 300;
 
+						@include respond-below(md) {
+							font-size: 18px;
+						}
+
 						strong {
 							font-weight: 600;
 						}
@@ -857,6 +985,10 @@ p {
 			align-items: center;
 			gap: 40px;
 
+			@include respond-below(md) {
+				flex-direction: column;
+			}
+
 			._col {
 				width: 100%;
 
@@ -866,6 +998,13 @@ p {
 					img {
 						width: 100%;
 						max-width: 540px;
+
+						@include respond-below(md) {
+							display: block;
+							max-width: 300px;
+							margin-left: auto;
+							margin-right: auto;
+						}
 					}
 				}
 				&-2 {
@@ -877,6 +1016,11 @@ p {
 						text-transform: uppercase;
 						margin-bottom: 25px;
 
+						@include respond-below(md) {
+							font-size: 26px;
+							text-align: center;
+						}
+
 						strong {
 							display: block;
 						}
@@ -892,6 +1036,10 @@ p {
 						&:not(:last-child) {
 							margin-bottom: 25px;
 						}
+
+						@include respond-below(md) {
+							font-size: 16px;
+						}
 					}
 				}
 			}
@@ -915,6 +1063,10 @@ p {
 						flex-direction: row;
 						gap: 32px;
 
+						@include respond-below(md) {
+							flex-wrap: wrap;
+						}
+
 						li {
 							border-radius: 20px;
 							background: #2e2d2c;
@@ -927,6 +1079,10 @@ p {
 
 							width: calc(100% / 4);
 
+							@include respond-below(md) {
+								width: calc(100% / 2 - (32px - (32px / 2)));
+							}
+
 							img {
 								width: 100%;
 								max-width: fit-content;
@@ -967,6 +1123,10 @@ p {
 			flex-direction: row;
 			gap: 60px;
 
+			@include respond-below(md) {
+				flex-direction: column-reverse;
+			}
+
 			._col {
 				&-1 {
 					h3 {
@@ -976,9 +1136,15 @@ p {
 						font-weight: 600;
 						letter-spacing: 2px;
 						margin-bottom: 15px;
-						margin-right: 45px;
 						text-transform: uppercase;
 						text-align: right;
+
+						@include respond-above(md) {
+							margin-right: 45px;
+						}
+						@include respond-below(md) {
+							text-align: center;
+						}
 					}
 					h2 {
 						color: #fff;
@@ -1003,6 +1169,7 @@ p {
 
 						@include respond-below(md) {
 							font-size: 26px;
+							margin-right: auto;
 						}
 					}
 
@@ -1027,6 +1194,10 @@ p {
 									margin-bottom: 12px;
 								}
 
+								@include respond-below(md) {
+									font-size: 16px;
+								}
+
 								strong {
 									font-weight: 700;
 								}
@@ -1040,11 +1211,23 @@ p {
 						margin: 40px 0 0 0;
 						list-style: none;
 
-						li {
+						@include respond-below(md) {
-							&:not(:last-child) {
+							display: flex;
-								margin-bottom: 20px;
+							flex-direction: row;
+							justify-content: center;
+							gap: 20px;
+							flex-wrap: wrap;
 						}
 
+						li {
+							&:not(:last-child) {
+								@include respond-above(md) {
+									margin-bottom: 20px;
+								}
+							}
+							@include respond-below(md) {
+								width: calc(100% / 2 - (20px - (20px / 2)));
+							}
 							img {
 								width: 100%;
 								max-width: fit-content;
@@ -1086,16 +1269,25 @@ p {
 					.preview_img {
 						margin-bottom: 50px;
 
+						@include respond-below(md) {
+							margin-bottom: 30px;
+						}
+
 						img {
 							width: 100%;
 							max-width: fit-content;
 							height: 400px;
 							object-fit: cover;
+
+							@include respond-below(md) {
+								height: 240px;
+							}
 						}
 					}
 					.preview_data {
 						h3 {
 							color: $cTxtBlack;
+							font-size: 24px;
 							font-family: $font3;
 							font-weight: 300;
 							letter-spacing: 2px;
@@ -1114,6 +1306,12 @@ p {
 								height: 1px;
 								background-color: #000000;
 							}
+
+							@include respond-below(md) {
+								font-size: 18px;
+								margin-bottom: 35px;
+								padding-bottom: 25px;
+							}
 						}
 
 						ul {
@@ -1125,11 +1323,19 @@ p {
 								&.mini {
 									font-size: 16px;
 									text-transform: uppercase;
+
+									@include respond-below(md) {
+										font-size: 15px;
+									}
 								}
 								color: $cTxtBlack;
 								font-size: 20px;
 								font-family: $font3;
 								font-weight: 300;
+
+								@include respond-below(md) {
+									font-size: 16px;
+								}
 							}
 						}
 					}