TRI-283: start 768>

styles/moover/chatterbox.scss

@@ -5,9 +5,16 @@
     margin-bottom: 180px;
   }
 
-    @media (max-width: 1304.98px) {
-      margin-bottom: 140px;
-    }
+  @media (max-width: 1304.98px) {
+    margin-bottom: 142px;
+  }
+
+  @media (max-width: 991.98px) {
+    margin-left: -50vw;
+    margin-right: -50vw;
+    margin-bottom: 122px;
+    //max-width: 100vw;
+  }
 
   &__slider {
     max-width: 1200px;
@@ -20,6 +27,12 @@
     @media (max-width: 1304.98px) {
       max-width: 1100px;
     }
+
+    @media (max-width: 991.98px) {
+      max-width: 720px;
+      //position: relative;
+
+    }
   }
 
   &__slide {
@@ -42,6 +55,12 @@
       background-size: 308px 565px;
     }
 
+    @media (max-width: 991.98px) {
+      width: 206px;
+      height: 377px;
+      background-size: 206px 377px;
+    }
+
     &.loaded {
       video {
         opacity: 1;
@@ -110,6 +129,11 @@
         width: 109px;
         height: 109px;
       }
+
+      @media (max-width: 991.98px) {
+        width: 48px;
+        height: 48px;
+      }
     }
 
     &::before,
@@ -133,6 +157,11 @@
         border-width: 23px 0 23px 35px;
         margin-left: 4px;
       }
+
+      @media (max-width: 991.98px) {
+        border-width: 10px 0 10px 14px;
+
+      }
     }
   }
 
@@ -150,6 +179,10 @@
     @media (max-width: 1304.98px) {
       height: 530px;
     }
+
+    @media (max-width: 991.98px) {
+      height: 370px;
+    }
   }
 
   .title {
@@ -166,6 +199,13 @@
     @media (max-width: 1304.98px) {
       right: -10px;
     }
+
+    @media (max-width: 991.98px) {
+      width: 40px;
+      height: 40px;
+      background-size: 32%;
+      right: 5%;
+    }
   }
 
   .slick-prev {
@@ -174,7 +214,21 @@
     @media (max-width: 1304.98px) {
       left: -10px;
     }
+
+    @media (max-width: 991.98px) {
+      width: 40px;
+      height: 40px;
+      background-size: 32%;
+      left: 5%;
+    }
   }
+
+  .slick-list {
+    @media (max-width: 991.98px) {
+      overflow: visible;
+    }
+  }
+
 }
 
 .slick-slide:not(.slick-center) .chatterbox__slide {
@@ -183,6 +237,10 @@
   @media (max-width: 1304.98px) {
     scale: 0.69;
   }
+
+  @media (max-width: 991.98px) {
+    scale: 0.8;
+  }
 }
 
 .slick-center {