Brush up card grid

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 {

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;

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