TRI-283: start 768>

static/css/moover/cards.css

@@ -13,6 +13,13 @@
   }
 }
 
+@media (max-width: 767.98px) {
+  .cards__item {
+    max-width: 251px;
+    margin-right: 18px;
+  }
+}
+
 .cards__img {
   margin-bottom: 5px;
 }
@@ -24,12 +31,24 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .cards__img {
+    margin-bottom: 8px;
+  }
+}
+
 @media (max-width: 991.98px) {
   .cards__img {
     margin-bottom: 8px;
   }
 }
 
+@media (max-width: 767.98px) {
+  .cards__img {
+    margin-bottom: 10px;
+  }
+}
+
 .cards__img:hover {
   scale: 1.05;
   transition: scale 0.15s linear;
@@ -38,6 +57,12 @@
 .cards__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) {
@@ -64,6 +89,12 @@
   }
 }
 
+.slick-active .cards__desc {
+  -webkit-line-clamp: initial;
+  /* number of lines to show */
+  line-clamp: initial;
+}
+
 .cards__desc a {
   color: var(--color-orange);
 }
@@ -100,7 +131,14 @@
   overflow: visible;
 }
 
-.slick-dots {
+@media (max-width: 767.98px) {
+  .cards .slick-list {
+    margin-bottom: 1px;
+    padding-left: 58px;
+  }
+}
+
+.cards .slick-dots {
   display: flex;
   justify-content: center;
   margin: 0;
@@ -108,11 +146,17 @@
   list-style-type: none;
 }
 
-.slick-dots li {
+.cards .slick-dots li {
   margin: 0 0.25rem;
 }
 
-.slick-dots button {
+@media (max-width: 767.98px) {
+  .cards .slick-dots li {
+    margin: 0 0.31rem;
+  }
+}
+
+.cards .slick-dots button {
   display: block;
   width: 8px;
   height: 8px;
@@ -123,6 +167,6 @@
   text-indent: -9999px;
 }
 
-.slick-dots li.slick-active button {
+.cards .slick-dots li.slick-active button {
   background-color: var(--color-orange);
 }