RWD

layout/style-scss/kontakt-v8.scss

@@ -43,9 +43,13 @@ strong {
 			justify-content: space-between;
 			min-height: 437px;
 
+			@include respond-below(lg) {
+				column-gap: 60px;
+			}
 			@include respond-below(md) {
 				flex-direction: column;
-				padding-top: 50px;
+				padding-top: 30px;
+				padding-bottom: 30px;
 				text-align: center;
 				row-gap: 50px;
 			}
@@ -55,6 +59,13 @@ strong {
 				left: 16%;
 				top: 0;
 				border: 0;
+
+				@include respond-below(sm) {
+					left: 50%;
+					transform: translateX(-50%);
+					width: 100%;
+					max-width: fit-content;
+				}
 			}
 
 			.c-col {
@@ -215,12 +226,16 @@ strong {
 					}
 					@include respond-below(md) {
 						max-width: unset;
+						min-width: unset;
+						width: auto;
+						min-height: unset;
+
 						text-align: center;
 						border-bottom: 0;
 						border-right: 1px solid #b79f87;
 						border-top-right-radius: 30px;
 						border-bottom-left-radius: 0;
-						padding: 70px 30px 70px 60px;
+						padding: 70px 30px 90px 60px;
 						margin-bottom: -25px;
 					}
 
@@ -345,6 +360,9 @@ strong {
 					background: #f7f6f5;
 					border-radius: 15px;
 
+					@include respond-below(md) {
+						max-width: unset;
+					}
 					// @include respond-below(md) {
 					// 	border-radius: 14px 14px 22px 22px;
 					// }
@@ -567,6 +585,12 @@ strong {
 						align-items: center;
 						margin-bottom: 0;
 
+						@include respond-below(xs) {
+							flex-direction: column;
+							align-items: center;
+							row-gap: 30px;
+						}
+
 						button[type='submit'] {
 							display: flex;
 							flex-direction: row;
@@ -589,7 +613,6 @@ strong {
 							border: none;
 							outline: none;
 							cursor: pointer;
-
 							// &:active {
 							// 	background: #f0e875;
 							// }
@@ -606,7 +629,10 @@ strong {
 
 						.g-recaptcha {
 							width: fit-content !important;
-							margin-left: auto;
+
+							@include respond-above(xs) {
+								margin-left: auto;
+							}
 						}
 					}
 				}
@@ -616,15 +642,52 @@ strong {
 }
 
 .box-3 {
-	min-height: 440px;
+	position: relative;
+	height: 440px;
 	background-color: #f1efed;
-	background-image: url('/upload/filemanager/Pages/Kontakt-8/img-2.jpg');
-	background-position: center right;
-	background-repeat: no-repeat;
-	align-content: center;
 	margin-bottom: 33px;
 
+	@include respond-below(sm) {
+		height: 320px;
+	}
+
+	.box-3--bg {
+		position: relative;
+		width: fit-content;
+		margin-left: auto;
+		height: 100%;
+
+		&::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			width: 100%;
+			max-width: 700px;
+			background: linear-gradient(
+				90.95deg,
+				#f1efed 5.52%,
+				rgba(245, 248, 255, 0) 95.9%
+			);
+		}
+
+		img {
+			width: 100%;
+			max-width: fit-content;
+			height: 100%;
+			object-fit: cover;
+			object-position: center left;
+		}
+	}
+	.container {
+		position: absolute;
+		inset: 0;
+		align-content: center;
+	}
 	.box-3--wrapper {
+		position: relative;
+
 		.c-row {
 			.box-title {
 				margin-bottom: 33px;
@@ -642,6 +705,18 @@ strong {
 						font-weight: 500;
 					}
 				}
+
+				@include respond-below(sm) {
+					margin-bottom: 26px;
+
+					h3 {
+						font-size: 28px;
+
+						strong {
+							font-size: 32px;
+						}
+					}
+				}
 			}
 
 			ol {
@@ -669,6 +744,10 @@ strong {
 							line-height: 1;
 							padding-top: 2px;
 						}
+
+						@include respond-below(sm) {
+							font-size: 16px;
+						}
 					}
 				}
 			}
@@ -696,13 +775,9 @@ strong {
 					letter-spacing: 0.01em;
 					margin: 0;
 
-					// @include respond-below(lg) {
-					// 	font-size: 36px;
-					// }
-					// @include respond-below(md) {
-					// 	font-size: 28px;
-					// 	line-height: 1.5;
-					// }
+					@include respond-below(sm) {
+						font-size: 34px;
+					}
 
 					strong {
 						font-weight: 500;
@@ -713,6 +788,9 @@ strong {
 				max-width: 620px;
 				margin: 0 auto 40px;
 
+				@include respond-below(sm) {
+					max-width: 470px;
+				}
 				p {
 					color: $cWhite;
 					font-family: $font3;
@@ -722,6 +800,10 @@ strong {
 					text-align: center;
 					letter-spacing: 0.01em;
 					margin: 0;
+
+					@include respond-below(sm) {
+						font-size: 16px;
+					}
 				}
 
 				#share-location-btn {
@@ -783,6 +865,10 @@ strong {
 								&::placeholder {
 									color: #1d1d1e;
 								}
+
+								@include respond-below(sm) {
+									font-size: 16px;
+								}
 							}
 						}
 						button {
@@ -801,6 +887,11 @@ strong {
 							min-width: fit-content;
 							outline: none;
 							cursor: pointer;
+
+							@include respond-below(sm) {
+								font-size: 14px;
+								padding: 10px 20px 9px;
+							}
 						}
 					}
 				}

templates_user/pages/page-contact-v8.php

@@ -157,6 +157,9 @@
     </section>
 
     <section class="box-3">
+        <div class="box-3--bg">
+            <img src="/upload/filemanager/Pages/Kontakt-8/img-2-1.jpg" alt="">
+        </div>
         <div class="container">
             <div class="box-3--wrapper">
                 <div class="c-row">