TRI-283: start 768>

styles/moover/cards.scss

@@ -11,6 +11,11 @@
     @media (max-width: 991.98px) {
       max-width: 270px;
     }
+
+    @media (max-width: 767.98px) {
+      max-width: 251px;
+      margin-right: 18px;
+    }
   }
 
   &__img {
@@ -21,10 +26,18 @@
       margin-bottom: 15px;
     }
 
+    @media (max-width: 1304.98px) {
+      margin-bottom: 8px;
+    }
+
     @media (max-width: 991.98px) {
       margin-bottom: 8px;
     }
 
+    @media (max-width: 767.98px) {
+      margin-bottom: 10px;
+    }
+
     &:hover {
       scale: 1.05;
       transition: scale 0.15s linear;
@@ -34,6 +47,11 @@
   &__desc {
     font-weight: 500;
     line-height: 22px;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 7; /* number of lines to show */
+    line-clamp: 7;
+    -webkit-box-orient: vertical;
 
     @media (min-width: 1720px) {
       font-size: 20px;
@@ -53,12 +71,21 @@
       padding-right: 8px;
     }
 
+    @media (max-width: 767.98px) {
+      //padding-left: 5px;
+      //padding-right: 5px;
+    }
+
+    .slick-active & {
+      -webkit-line-clamp: initial; /* number of lines to show */
+      line-clamp: initial;
+    }
+
     a {
       color: var(--color-orange);
     }
   }
 
-
   &__arrow {
     width: 62px;
     height: 20px;
@@ -79,44 +106,51 @@
     @media (max-width: 991.98px) {
       display: none;
     }
-
-
   }
 
-
   .slick-list {
     overflow: visible;
+
+    @media (max-width: 767.98px) {
+      margin-bottom: 1px;
+      padding-left: 58px;
+    }
+  }
+
+  .slick-dots {
+    display: flex;
+    justify-content: center;
+
+    margin: 0;
+    padding: 1rem 0;
+
+    list-style-type: none;
+
+    li {
+      margin: 0 0.25rem;
+
+      @media (max-width: 767.98px) {
+        margin: 0 0.31rem;
+}
+    }
+
+    button {
+      display: block;
+      width: 8px;
+      height: 8px;
+      padding: 0;
+
+      border: none;
+      border-radius: 100%;
+      background-color: #D9D9D9;
+
+      text-indent: -9999px;
+    }
+
+    li.slick-active button {
+      background-color: var(--color-orange);
+    }
+
   }
 }
 
-.slick-dots {
-  display: flex;
-  justify-content: center;
-
-  margin: 0;
-  padding: 1rem 0;
-
-  list-style-type: none;
-
-  li {
-    margin: 0 0.25rem;
-  }
-
-  button {
-    display: block;
-    width: 8px;
-    height: 8px;
-    padding: 0;
-
-    border: none;
-    border-radius: 100%;
-    background-color: #D9D9D9;
-
-    text-indent: -9999px;
-  }
-
-  li.slick-active button {
-    background-color: var(--color-orange);
-  }
-
-}