Save

layout/style-scss/home-page.scss

@@ -195,6 +195,10 @@ strong {
 			row-gap: 15px;
 			column-gap: 8px;
 
+			@include respond-below(lg) {
+				flex-wrap: wrap;
+			}
+
 			.tile {
 				display: flex;
 				flex-direction: row;
@@ -212,6 +216,14 @@ strong {
 				&:hover {
 					background: #f1efed;
 				}
+
+				@include respond-below(xl) {
+					padding: 20px 30px 20px 20px;
+				}
+				@include respond-below(lg) {
+					flex-basis: calc(50% - 4px);
+				}
+
 				> a {
 					position: absolute;
 					inset: 0;
@@ -229,6 +241,10 @@ strong {
 						font-size: 20px;
 						line-height: 1.25;
 						margin: 9px;
+
+						@include respond-below(xl) {
+							font-size: 18px;
+						}
 					}
 				}
 
@@ -294,6 +310,10 @@ strong {
 								font-weight: 500;
 								font-size: 20px;
 								line-height: 1.3;
+
+								@include respond-below(lg) {
+									font-size: 18px;
+								}
 							}
 
 							p {
@@ -305,6 +325,10 @@ strong {
 								line-height: 1.5;
 								max-width: 220px;
 								margin: 0 auto;
+
+								@include respond-below(lg) {
+									font-size: 14px;
+								}
 							}
 						}
 					}
@@ -506,6 +530,10 @@ strong {
 				flex-direction: row;
 				align-items: center;
 
+				@include respond-below(md) {
+					flex-direction: column-reverse;
+				}
+
 				.data-text {
 					padding: 30px 70px;
 					// max-width: 750px;
@@ -532,8 +560,17 @@ strong {
 					position: relative;
 					margin-left: auto;
 
+					@include respond-below(md) {
+						width: 100%;
+					}
+
 					> img {
 						max-height: 212px;
+
+						@include respond-below(md) {
+							width: 100%;
+							object-fit: cover;
+						}
 					}
 					.shape {
 						position: absolute;
@@ -544,6 +581,10 @@ strong {
 						img {
 							height: 100%;
 						}
+
+						@include respond-below(md) {
+							display: none;
+						}
 					}
 				}
 			}
@@ -569,6 +610,15 @@ strong {
 				margin: 0;
 				list-style: none;
 
+				@include respond-below(lg) {
+					display: grid;
+					grid-template-columns: 1fr 1fr 1fr;
+					gap: 40px;
+				}
+				@include respond-below(sm) {
+					gap: 30px;
+				}
+
 				.tile {
 					display: flex;
 					flex-direction: column;
@@ -595,6 +645,16 @@ strong {
 							font-size: 20px;
 							line-height: 1.25;
 							text-align: center;
+
+							@include respond-below(lg) {
+								font-size: 18px;
+							}
+							@include respond-below(md) {
+								font-size: 16px;
+							}
+							@include respond-below(sm) {
+								font-size: 14px;
+							}
 						}
 					}
 				}
@@ -603,7 +663,9 @@ strong {
 	}
 
 	.box-6 {
-		margin-bottom: 100px;
+		margin-bottom: 75px;
+		overflow: hidden;
+		padding-bottom: 25px;
 
 		&--wrapper {
 			.box-title {
@@ -614,6 +676,10 @@ strong {
 				overflow: initial;
 
 				.swiper-slide {
+					@include respond-below(sm) {
+						width: 250px;
+					}
+
 					.slide-wrapper {
 						background: $cWhite;
 						border: 1px solid #d2cec4;
@@ -733,6 +799,13 @@ strong {
 								font-weight: 500;
 								font-size: 20px;
 								line-height: 1.3;
+
+								@include respond-below(xl) {
+									font-size: 18px;
+								}
+								@include respond-below(sm) {
+									font-size: 16px;
+								}
 							}
 
 							.slide-color {
@@ -912,6 +985,7 @@ strong {
 
 		&--wrapper {
 			.data-box {
+				position: relative;
 				background: #1e2832;
 				border-radius: 30px;
 				overflow: hidden;
@@ -921,6 +995,14 @@ strong {
 				flex-direction: row;
 				align-items: center;
 
+				> svg {
+					position: absolute;
+					top: 0;
+					bottom: 0;
+					left: 50px;
+					opacity: 0.36;
+				}
+
 				.data-text {
 					padding: 30px 70px;
 					flex: 1;
@@ -998,6 +1080,10 @@ strong {
 				grid-template-columns: repeat(3, 1fr);
 				gap: 30px;
 
+				@include respond-below(md) {
+					grid-template-columns: 1fr;
+				}
+
 				.tile {
 					.tile-wrapper {
 						display: flex;
@@ -1010,6 +1096,12 @@ strong {
 						box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.1);
 						border-radius: 50px 0px;
 
+						@include respond-below(lg) {
+							padding: 25px;
+							row-gap: 28px;
+							border-radius: 30px 0px;
+						}
+
 						.stars {
 							padding: 0;
 							margin: 0;
@@ -1038,6 +1130,10 @@ strong {
 								font-weight: 300;
 								font-size: 18px;
 								line-height: 1.5;
+
+								@include respond-below(lg) {
+									font-size: 16px;
+								}
 							}
 						}
 						.tile-author {

templates_user/pages/home-page-v2.php

@@ -579,6 +579,10 @@
             <div class="box-8--wrapper">
                 
                 <div class="data-box">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="227" height="214" viewBox="0 0 227 214" fill="none">
+                        <path d="M113.5 214V128.124L65.1651 0H0L90.8917 214H113.5Z" fill="#F8F6F6"/>
+                        <path opacity="0.5" d="M113.5 214V128.124L161.835 0H227L136.108 214H113.5Z" fill="#DFDFDF"/>
+                    </svg>
                     <div class="data-text">
                         <div class="data-text--wrapper">
                             <h3>Otwórz drzwi do inspiracji</h3>
@@ -666,7 +670,7 @@
     });
 
     var swiper_box_2 = new Swiper(".slider-box-2", {
-        slidesPerView: 4,
+        slidesPerView: 2,
         speed: 5000,
         autoplay: {
             delay: 5000,
@@ -675,16 +679,43 @@
             el: ".swiper-pagination",
             clickable: true,
         },
+        breakpoints: {
+            // 991: {
+            //     slidesPerView: 3,
+            // },
+            1200: {
+                slidesPerView: 4,
+            },
+        }
     });
 
     var swiper_box_3 = new Swiper(".slider-box-3", {
-      slidesPerView: 5,
+        slidesPerView: 3,
         spaceBetween: 80,
+        breakpoints: {
+            991: {
+                slidesPerView: 4,
+            },
+            1200: {
+                slidesPerView: 5,
+            },
+        }
     });
 
     var swiper_box_6 = new Swiper(".slider-box-6", {
-      slidesPerView: 4,
+        slidesPerView: "auto",
         spaceBetween: 26,
+        breakpoints: {
+            768: {
+                slidesPerView: 2,
+            },
+            991: {
+                slidesPerView: 3,
+            },
+            1200: {
+                slidesPerView: 4,
+            },
+        }
     });
 
     (function () {