TRI-283: end editors pages

styles/moover/cards.scss

@@ -16,6 +16,17 @@
       max-width: 251px;
       margin-right: 18px;
     }
+
+    .slick-active &,
+    &:hover, &:focus {
+
+      .cards__desc {
+        -webkit-line-clamp: initial; /* number of lines to show */
+        line-clamp: initial;
+        max-height: 17em;
+
+      }
+    }
   }
 
   &__img {
@@ -47,11 +58,15 @@
   &__desc {
     font-weight: 500;
     line-height: 22px;
+    padding: 0 5px;
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 7; /* number of lines to show */
     line-clamp: 7;
     -webkit-box-orient: vertical;
+    transition: all 0.3s ease-in-out;
+    max-height: 10em;
+
 
     @media (min-width: 1720px) {
       font-size: 20px;
@@ -71,14 +86,11 @@
       padding-right: 8px;
     }
 
-    @media (max-width: 767.98px) {
-      //padding-left: 5px;
-      //padding-right: 5px;
-    }
-
-    .slick-active & {
+    .slick-active &,
+    &:hover, &:focus {
       -webkit-line-clamp: initial; /* number of lines to show */
       line-clamp: initial;
+      max-height: 999em;
     }
 
     a {
@@ -131,7 +143,7 @@
 
       @media (max-width: 767.98px) {
         margin: 0 0.31rem;
-}
+      }
     }
 
     button {
@@ -152,5 +164,16 @@
     }
 
   }
+
+  &--cstmr .cards {
+    &__desc {
+      padding: 0 50px;
+
+      @media (max-width: 1304.98px) {
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+    }
+  }
 }