responsive resources cards

Signed-off-by: kishore08-07 <kishorebsm8@gmail.com>

Author: kishore08-07

src/components/Related-Posts/relatedPosts.style.js

@@ -21,46 +21,11 @@ const RelatedPostsWrapper = styled.div`
     .cardCol{
         padding: 0 1rem;
     }
-    @media screen and (max-width: 720px) {
-        .cardCol{
-            padding: 0 0.75rem;
-            margin: auto;
-            width: 100%;
-        }
-    }
-    @media screen and (min-width: 721px) and (max-width: 992px) {
-        .cardCol{
-            padding: 0 1rem;
-            margin: auto;
-        }
-    }
 
     .slick-list{
         padding-top: 2px;
         text-align: center;
     }
-    @media screen and (max-width: 720px) {
-        .slick-list{
-            margin: 0;
-            padding: 2px 0;
-            overflow: hidden;
-        }
-        .slick-track {
-            display: flex;
-            align-items: stretch;
-        }
-        .slick-slide {
-            height: auto;
-            > div {
-                height: 100%;
-            }
-        }
-    }
-    @media screen and (min-width: 721px) and (max-width: 992px) {
-        .slick-list{
-            margin: 0;	
-        }
-    }
 
     .slick-arrow{
         width: 4.8rem;	
@@ -76,37 +41,18 @@ const RelatedPostsWrapper = styled.div`
     .slick-arrow:hover:before{	
         color: ${props => props.theme.secondaryColor};
     }
-    @media screen and (max-width: 720px) {
-        .slick-arrow{
-            width: 3rem;	
-            height: 4rem;
-        }
-        .slick-arrow:before{	
-            font-size: 4rem;
-        }
-    }
     .slick-prev:before{	
         content: "‹";	
         line-height: 0;
         opacity: 1;
         margin-left: -3rem;
     }
-    @media screen and (max-width: 720px) {
-        .slick-prev:before{	
-            margin-left: -1.5rem;
-        }
-    }
     .slick-next:before{	
         content: "›";
         line-height: 0;
         opacity: 1;
         margin-left: 2rem;
     }
-    @media screen and (max-width: 720px) {
-        .slick-next:before{	
-            margin-left: 1rem;
-        }
-    }
     .slick-disabled{	
         visibility: hidden;
     }
@@ -121,19 +67,6 @@ const RelatedPostsWrapper = styled.div`
         opacity: 1;
         color: ${props => props.theme.secondaryColor};
     }
-    @media screen and (max-width: 720px) {
-        .slick-dots {
-            bottom: -35px;
-            padding: 0;
-            margin: 0;
-        }
-        .slick-dots li {
-            margin: 0 4px;
-        }
-        .slick-dots li button:before {
-            font-size: 0.8rem;
-        }
-    }
 
     .post-meta-block{
         text-align: left;
@@ -151,26 +84,6 @@ const RelatedPostsWrapper = styled.div`
         height: 22rem;
     }
 
-    @media screen and (min-width: 1200px) {
-        .post-content-block {
-            height: 8rem;
-        }
-
-        .allBlogs{
-            height: 19.5rem;
-        }
-    }
-
-    @media screen and (max-width: 720px) and (min-width: 385px){
-        .post-content-block{
-            height: 8rem;
-        }
-
-        .allBlogs{
-            height: 19.5rem;
-        }
-    }
-
     .allBlogs_card{
         display: inline-block;
         height: inherit;
@@ -210,6 +123,88 @@ const RelatedPostsWrapper = styled.div`
             }
         }
     }
+
+    @media screen and (min-width: 721px) and (max-width: 992px) {
+        .cardCol{
+            padding: 0 1rem;
+            margin: auto;
+        }
+        .slick-list{
+            margin: 0;	
+        }
+    }
+
+    @media screen and (min-width: 1200px) {
+        .post-content-block {
+            height: 8rem;
+        }
+
+        .allBlogs{
+            height: 19.5rem;
+        }
+    }
+
+    @media screen and (max-width: 720px) {
+        .cardCol{
+            padding: 0 0.75rem;
+            margin: auto;
+            width: 100%;
+        }
+
+        .slick-list{
+            margin: 0;
+            padding: 2px 0;
+            overflow: hidden;
+        }
+        .slick-track {
+            display: flex;
+            align-items: stretch;
+        }
+        .slick-slide {
+            height: auto;
+            > div {
+                height: 100%;
+            }
+        }
+
+        .slick-arrow{
+            width: 3rem;	
+            height: 4rem;
+        }
+        .slick-arrow:before{	
+            font-size: 4rem;
+        }
+
+        .slick-prev:before{	
+            margin-left: -1.5rem;
+        }
+
+        .slick-next:before{	
+            margin-left: 1rem;
+        }
+
+        .slick-dots {
+            bottom: -35px;
+            padding: 0;
+            margin: 0;
+        }
+        .slick-dots li {
+            margin: 0 4px;
+        }
+        .slick-dots li button:before {
+            font-size: 0.8rem;
+        }
+    }
+
+    @media screen and (max-width: 720px) and (min-width: 385px){
+        .post-content-block{
+            height: 8rem;
+        }
+
+        .allBlogs{
+            height: 19.5rem;
+        }
+    }
 `;