in progress

wp-content/themes/biuro/css/07-components/_component--feedbacks--default.css

+/* ------------- Component: feedbacks ------------- */
+
+/* critical:start */
+
+.c-feedbacks { padding: 30px 0 30px; background: linear-gradient(134.06deg, #FFFFFF 0%, #CBE2EC 100%);
+    @media (--min--medium) {
+        padding: 50px 0 70px;
+    }
+}
+
+.c-feedbacks--inner { position: relative; overflow: hidden; width: 340px; height: 250px; margin: 0 auto; max-width: 100%;
+    @media (--min--medium) {
+         width: 640px; height: 300px;
+    }
+}
+
+.c-feedbacks--heading { color: #2A3644; margin: 0 0 20px; padding: 0 30px; font-size: 18px; line-height: 26px; font-weight: 500; text-align: center;
+    @media (--min--medium) {
+        font-size: 25px; line-height: 29px; margin: 0 0 40px;
+    }
+}
+
+.c-feedbacks--section    { padding-top: 40px; }
+.c-feedbacks--section-inner { position: relative; height: 110px; width: 320px; margin: 0 5px; padding: 60px 0 0; border-radius: 23px; background-color: #FFFFFF;
+   @media (--min--medium) {
+        height: 140px; width: 574px; margin: 0 33px;
+    }
+}
+
+/* critical:end */
+
+.c-feedbacks--img { position: absolute; top: -32px; left: 50%; margin-left: -42px; }
+
+.c-feedbacks--feedback { margin: 0 auto 10px; max-width: 260px; height: 58px; color: #2A3644; font-family: Georgia; font-size: 14px; line-height: 26px; text-align: center; overflow: hidden;
+   @media (--min--medium) {
+        margin: 0 auto 17px; height: 79px;  font-size: 21px; line-height: 40px; max-width: 400px;
+    }
+}
+
+.c-feedbacks--name { color: #919191; font-family: Georgia; font-size: 13px; line-height: 15px; text-align: center; padding: 0 10px;
+    @media (--min--medium) {
+        font-size: 15px; line-height: 17px;
+    }
+}
+
+.swiper-container-horizontal > .swiper-pagination-bullets { bottom: 0; }
+
+.swiper-pagination-bullet   { width: 9px; height: 9px; background: #D8D8D8; opacity: 1; }
+
+.swiper-pagination-bullet-active { background: #717171; }

wp-content/themes/biuro/css/07-components/_component--feedbacks.css

@@ -2,15 +2,15 @@
 
 /* critical:start */
 
-.c-feedbacks { padding: 30px 0 30px; background: linear-gradient(134.06deg, #FFFFFF 0%, #CBE2EC 100%);
+.c-feedbacks { padding: 30px 0 30px; background: linear-gradient(134.06deg, #FFFFFF 0%, #CBE2EC 100%); overflow: hidden;
     @media (--min--medium) {
         padding: 50px 0 70px;
     }
 }
 
-.c-feedbacks--inner { position: relative; overflow: hidden; width: 340px; height: 250px; margin: 0 auto; max-width: 100%;
+.c-feedbacks--inner { position: relative; overflow-x: hidden;  max-width: 340px; height: 370px; margin: 0 auto; width: 100%; padding: 10px 0;
     @media (--min--medium) {
-         width: 640px; height: 300px;
+         /*width: 640px; height: 350px;*/max-width: 790px;
     }
 }
 
@@ -20,20 +20,21 @@
     }
 }
 
-.c-feedbacks--section    { padding-top: 40px; }
-.c-feedbacks--section-inner { position: relative; height: 110px; width: 320px; margin: 0 5px; padding: 60px 0 0; border-radius: 23px; background-color: #FFFFFF;
+.c-feedbacks--section    { /* padding-top: 40px; */ max-width: 300px; height: 350px; margin: 0 auto;       }
+.c-feedbacks--section-inner { position: relative; height: 100% !important; max-width: 100%; /* margin: 0 5px; */ /* padding: 60px 0 0; */ background-color: #FFFFFF; border-radius: 3px; box-shadow: -1px 15px 46px 0 rgba(192,210,231,0.5);
    @media (--min--medium) {
-        height: 140px; width: 574px; margin: 0 33px;
+        height: 140px; width: 574px; /* margin: 0 33px; */
     }
 }
 
+
 /* critical:end */
 
-.c-feedbacks--img { position: absolute; top: -32px; left: 50%; margin-left: -42px; }
+.c-feedbacks--img { display: block; margin: 0 auto; /* position: absolute; top: -32px; left: 50%; margin-left: -42px; */ }
 
-.c-feedbacks--feedback { margin: 0 auto 10px; max-width: 260px; height: 58px; color: #2A3644; font-family: Georgia; font-size: 14px; line-height: 26px; text-align: center; overflow: hidden;
+.c-feedbacks--feedback { margin: 0 auto 10px; max-width: 260px; height: 58px; color: #2A3644; font-family: Georgia; font-size: 14px; line-height: 26px; text-align: center; overflow: hidden; width: 100%;
    @media (--min--medium) {
-        margin: 0 auto 17px; height: 79px;  font-size: 21px; line-height: 40px; max-width: 400px;
+        margin: 0 auto 17px; height: 79px;  font-size: 21px; line-height: 40px; max-width: 400px; width: 100%;
     }
 }
 
@@ -43,6 +44,12 @@
     }
 }
 
+
+.swiper-slide { max-width: 300px; }
+/*.swiper-slide-prev { opacity: 1;  }
+.swiper-slide-active { opacity: 1;  }
+.swiper-slide-next { opacity: 1;  }
+*/
 .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 0; }
 
 .swiper-pagination-bullet   { width: 9px; height: 9px; background: #D8D8D8; opacity: 1; }

wp-content/themes/biuro/js/main.js

@@ -8,20 +8,62 @@
 import Awesomplete from './vendor/awesomplete';
 import Swiper from './vendor/swiper';
 
+// const swiper = new Swiper('.c-feedbacks--inner', {
+//     speed: 900,
+//     autoplay: {
+//         delay: 6000,
+//         disableOnInteraction: false
+//     },
+//     grabCursor: true,
+//     loop: true,
+//     pagination: {
+//         el: '.swiper-pagination',
+//         clickable: true
+//     }
+// });
+
 const swiper = new Swiper('.c-feedbacks--inner', {
-    speed: 900,
-    autoplay: {
-        delay: 6000,
-        disableOnInteraction: false
-    },
+    effect: 'coverflow',
     grabCursor: true,
+    centeredSlides: true,
+    slidesPerView: 'auto',
+    coverflowEffect: {
+        rotate: 0,
+        stretch: 0,
+        depth: 100,
+        modifier: 1,
+        slideShadows: false
+    },
+    speed: 900,
+    // autoplay: {
+    //     delay: 6000,
+    //     disableOnInteraction: false
+    // },
+    // grabCursor: true,
     loop: true,
-    pagination: {
-        el: '.swiper-pagination',
-        clickable: true
-    }
+    // pagination: {
+    //     el: '.swiper-pagination',
+    //     clickable: true
+    // }
 });
 
+// var swiper = new Swiper('.swiper-container', {
+//   effect: 'coverflow',
+//   grabCursor: true,
+//   centeredSlides: true,
+//   slidesPerView: 'auto',
+//   coverflowEffect: {
+//     rotate: 50,
+//     stretch: 0,
+//     depth: 100,
+//     modifier: 1,
+//     slideShadows : true,
+//   },
+//   pagination: {
+//     el: '.swiper-pagination',
+//   },
+// });
+
 const lisp = (str) => {
     var symbols = {
         'ą': 'a',