TRI-283: edit chatterbox

styles/moover/chatterbox.scss

@@ -16,6 +16,12 @@
     //max-width: 100vw;
   }
 
+  @media (max-width: 767.98px) {
+    max-width: 100vw;
+    margin: 0 auto 100px;
+    position: relative;
+  }
+
   &__slider {
     max-width: 1200px;
     margin: 0 auto;
@@ -31,7 +37,18 @@
     @media (max-width: 991.98px) {
       max-width: 720px;
       //position: relative;
+    }
 
+    @media (max-width: 767.98px) {
+      width: 720px;
+      left: 50%;
+      transform: translateX(-50%);
+      //position: relative;
+    }
+
+    @media (max-width: 479.98px) {
+      width: 830px;
+      max-width: initial;
     }
   }
 
@@ -61,6 +78,12 @@
       background-size: 206px 377px;
     }
 
+    @media (max-width: 767.98px) {
+      width: 234px;
+      height: 429px;
+      background-size: 234px 429px;
+    }
+
     &.loaded {
       video {
         opacity: 1;
@@ -76,6 +99,11 @@
       opacity: 0;
       transition: opacity 0.2s ease-in-out;
       pointer-events: none;
+
+      @media (max-width: 767.98px) {
+        position: relative;
+        top: -4px;
+      }
     }
 
     img {
@@ -185,6 +213,18 @@
     }
   }
 
+  &__mbtns {
+    position: absolute;
+    top: 58%;
+    transform: translateY(-50%);
+    left: 0;
+    right: 0;
+
+    @media (max-width: 479.98px) {
+      top: 61%;
+      }
+  }
+
   .title {
     margin-bottom: 60px;
 
@@ -206,6 +246,10 @@
       background-size: 32%;
       right: 5%;
     }
+
+    @media (max-width: 479.98px) {
+      right: 0;
+    }
   }
 
   .slick-prev {
@@ -221,6 +265,10 @@
       background-size: 32%;
       left: 5%;
     }
+
+    @media (max-width: 479.98px) {
+      left: 0;
+    }
   }
 
   .slick-list {
@@ -241,6 +289,10 @@
   @media (max-width: 991.98px) {
     scale: 0.8;
   }
+
+  @media (max-width: 479.98px) {
+    scale: 0.85;
+  }
 }
 
 .slick-center {