From e3cee97d71906511e4bc2202e819a568fe58c4a7 Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jan.tuomi@eficode.com>
Date: Sun, 18 Nov 2018 14:35:11 +0200
Subject: [PATCH] Brush up card grid

---
 src/components/Card/Card.scss               | 25 +++++++++++++++++++--
 src/components/PageSection/PageSection.scss |  2 +-
 src/pages/FrontPage/FrontPage.scss          |  5 +++++
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
index 1af293f..5d056c8 100644
--- a/src/components/Card/Card.scss
+++ b/src/components/Card/Card.scss
@@ -3,9 +3,24 @@
 .card {
   background-color: $white;
   color: $dark-blue;
-  max-width: 20rem;
   white-space: wrap;
   margin: 1rem 1rem;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  max-width: 20%;
+
+  @media screen and (min-width: 1000px) and (max-width: 1200px - 1px) {
+    width: 45%;
+    max-width: 45%;
+    margin-bottom: 2rem;
+  }
+
+  @media screen and (max-width: 1000px - 1px) {
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 3rem;
+  }
 
   &__title {
     padding: 0.5rem;
@@ -29,8 +44,14 @@
     justify-content: center;
     text-align: center;
     text-overflow: ellipsis;
-    font-size: 0.8rem;
+    font-size: 12px;
     font-weight: 200;
+    margin: 0 0 0.5rem;
+
+    @media screen and (max-width: 1200px - 1px) {
+      margin: 0.5rem 0;
+      font-size: 16px;
+    }
   }
 
   &__datetime {
diff --git a/src/components/PageSection/PageSection.scss b/src/components/PageSection/PageSection.scss
index c55631e..1032c62 100644
--- a/src/components/PageSection/PageSection.scss
+++ b/src/components/PageSection/PageSection.scss
@@ -5,7 +5,7 @@
   background-color: $dark-blue;
   display: flex;
   flex-flow: row wrap;
-  justify-content: flex-start;
+  justify-content: space-between;
 
   @media screen and (max-width: 800px - 1px) {
     flex-flow: column nowrap;
diff --git a/src/pages/FrontPage/FrontPage.scss b/src/pages/FrontPage/FrontPage.scss
index a3163a5..54b9989 100644
--- a/src/pages/FrontPage/FrontPage.scss
+++ b/src/pages/FrontPage/FrontPage.scss
@@ -8,5 +8,10 @@
   &__page-links {
     display: flex;
     flex-flow: column wrap;
+
+    @media screen and (max-width: 1200px - 1px) {
+      margin: 0 2rem 1rem 0;
+      width: 40%;
+    }
   }
 }