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;
+    }
+    }
+  }
 }
 

styles/moover/easy.scss

@@ -120,6 +120,10 @@
           width: 89%;
           margin-bottom: 53px;
         }
+
+        @media (max-width: 991.98px) {
+          max-width: 78%;
+        }
       }
     }
 
@@ -325,6 +329,6 @@
       padding-right: 50px;
       margin-top: -8px;
       max-width: 100%;
-      }
+    }
   }
 }

styles/moover/header.scss

@@ -103,11 +103,15 @@
     &-content {
       right: 0;
       height: initial;
-    }
 
-    img {
-      width: 25px;
-      height: 25px;
+      @media (max-width: 575px) {
+        right: 0;
+      }
     }
   }
+
+  img {
+    width: 25px;
+    height: 25px;
+  }
 }

styles/moover/uses.scss

@@ -13,9 +13,9 @@
     margin-bottom: 100px;
   }
 
-    @media (max-width: 479.98px) {
-      margin-bottom: 199px;
-      }
+  @media (max-width: 479.98px) {
+    margin-bottom: 199px;
+  }
 
   &__grid {
     text-align: left;
@@ -29,10 +29,10 @@
       column-gap: 15px;
     }
 
-      @media (max-width: 479.98px) {
-        display: block;
-        text-align: center;
-      }
+    @media (max-width: 479.98px) {
+      display: block;
+      text-align: center;
+    }
   }
 
 
@@ -54,7 +54,6 @@
         margin-bottom: 0;
       }
     }
-
   }
 
   &__icon {
@@ -77,9 +76,87 @@
       margin-bottom: 39px;
     }
 
-      @media (max-width: 479.98px) {
-        margin-bottom: 30px;
-      }
+    @media (max-width: 479.98px) {
+      margin-bottom: 30px;
+    }
   }
 
+  &__title {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 36px;
+    margin-bottom: 10px;
+  }
+
+
+  &--cstmr {
+    & .uses {
+      &__item {
+        text-align: center;
+        padding: 0 15px;
+
+        @media (max-width: 991.98px) {
+          margin-bottom: 42px;
+          min-height: 255px;
+        }
+
+        @media (max-width: 479.98px) {
+          margin-bottom: 25px;
+          min-height: 194px;
+        }
+
+        p {
+          @media (max-width: 991.98px) {
+            max-width: 90%;
+            margin: 0 auto;
+          }
+
+          @media (max-width: 479.98px) {
+            max-width: 100%;
+          }
+        }
+      }
+
+      &__icon {
+        width: 118px;
+        height: 118px;
+
+        @media (max-width: 991.98px) {
+          width: 142px;
+          height: 142px;
+          margin-bottom: 23px;
+        }
+
+        @media (max-width: 479.98px) {
+          width: 117px;
+          height: 117px;
+          margin-bottom: 8px;
+        }
+      }
+
+
+      &__grid {
+        @media (max-width: 991.98px) {
+          grid-template-columns: 1fr;
+        }
+      }
+    }
+
+    .title {
+
+      @media (max-width: 1304.98px) {
+        margin-bottom: 61px;
+        max-width: 80%;
+      }
+
+      @media (max-width: 991.98px) {
+        margin-bottom: 44px;
+      }
+
+      @media (max-width: 479.98px) {
+        max-width: 90%;
+        margin-bottom: 31px;
+      }
+    }
+  }
 }