Give some css love to card images

src/components/Card/Card.scss

@@ -7,18 +7,16 @@
   margin: 1rem 1rem;
   display: flex;
   flex-flow: column nowrap;
-  justify-content: space-between;
-  max-width: 20%;
+  justify-content: flex-start;
+  width: calc(25% - 2rem);
 
   @media screen and (min-width: 1000px) and (max-width: 1200px - 1px) {
-    width: 45%;
-    max-width: 45%;
+    width: calc(50% - 2rem);
     margin-bottom: 2rem;
   }
 
   @media screen and (max-width: 1000px - 1px) {
     width: 100%;
-    max-width: 100%;
     margin-bottom: 3rem;
     margin-left: 0;
     margin-right: 0;
@@ -34,12 +32,28 @@
 
   &__image {
     width: 100%;
+    height: 300px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
     margin-bottom: 1rem;
+
+    @media screen and (min-width: 1200px) {
+      height: 15vw;
+    }
+
+    @media screen and (max-width: 1200px - 1px) {
+      height: 35vh;
+    }
   }
 
   &__button {
     display: flex;
     justify-content: center;
+
+    button {
+      height: 100%;
+    }
   }
 
   &__text {

src/components/Card/Card.tsx

@@ -25,7 +25,9 @@ class Card extends React.Component<CardProps, CardState> {
     };
     const datetime = new Date(this.props.start_time).toLocaleString("fi-FI", options);
 
-    const imageElem = !!image ? <img src={image} className="card__image" /> : null;
+    const imageElem = !!image ? (
+      <div style={{ backgroundImage: `url(${image})`, }} className="card__image" />
+    ) : null;
     if (link) {
       return (
         <Link to={link} className="card">

src/components/PageLink/PageLink.scss

@@ -4,7 +4,7 @@
   border-left-color: $blue;
   border-left-width: 0.8rem;
   border-left-style: solid;
-  margin: 1rem;
+  margin: 0 1rem 1rem 0;
 
   & p {
     display: flex;

src/pages/FrontPage/FrontPage.scss

@@ -4,14 +4,4 @@
   display: flex;
   flex-flow: column wrap;
   justify-content: flex-start;
-
-  &__page-links {
-    display: flex;
-    flex-flow: column wrap;
-
-    @media screen and (max-width: 1200px - 1px) {
-      margin: 0 2rem 1rem 0;
-      width: 40%;
-    }
-  }
 }

src/pages/FrontPage/FrontPage.tsx

@@ -112,7 +112,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
               button={<Button type={ButtonType.Filled} onClick={() => { }}>Lue lisää&nbsp;›</Button>}
             />
           ))}
-          <div className="front-page__page-links">
+          <div className="card">
             <PageLink to="/events/" desc="löydät tapahtumakalenterista&nbsp;›">
               Kaikki tapahtumat
             </PageLink>
@@ -135,13 +135,13 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
                 button={<Button type={ButtonType.Filled} onClick={() => { }}>Lue lisää&nbsp;›</Button>}
               />
             ))}
-            <div className="front-page__page-links">
-            <PageLink to="/feed/" desc="ja hallituksen kuulumiset&nbsp;›">
-              Lue tuoreimmat uutiset
-            </PageLink>
-            <PageLink to="sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
-              Kuvia tapahtumista
-            </PageLink>
+            <div className="card">
+              <PageLink to="/feed/" desc="ja hallituksen kuulumiset&nbsp;›">
+                Lue tuoreimmat uutiset
+              </PageLink>
+              <PageLink to="sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
+                Kuvia tapahtumista
+              </PageLink>
             </div>
         </PageSection>
         <PageSection center backgroundColor={PageSectionColor.White}>