ui: fix blog card title truncation and spacing

Signed-off-by: Ansh Sharma <anshsharma161105@gmail.com>

Author: Xynash

src/components/Card/Card.style.js

@@ -75,7 +75,12 @@ export const CardWrapper = styled.div`
 
   .post-content-block {
     padding: 1rem 2rem;
-    height: 8rem;
+    padding-bottom: 1.5rem;
+    height: auto;
+    min-height: 9rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
   }
 
   @media screen and (max-width: 1200px) and (min-width: 992px) {
@@ -103,6 +108,11 @@ export const CardWrapper = styled.div`
   .post-title {
     font-size: 1.4rem;
     font-weight: 400;
+    margin: 0 -1rem 0.5rem -1rem;
+    padding: 0 1rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -112,9 +122,14 @@ export const CardWrapper = styled.div`
     height: auto;
     display: flex;
     margin-bottom: 0.5rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     .author {
       text-align: end;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     .author,
     p {
@@ -123,6 +138,9 @@ export const CardWrapper = styled.div`
       font-weight: 400;
       flex: auto;
       transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     .type {
       text-align: end;