Makes tiles responsive, places links in left bottom corner

Author: aniluede

src/css/footer.css

@@ -4,6 +4,9 @@ footer.footer {
   font-size: calc(15 / var(--rem-base) * 1rem);
   line-height: var(--footer-line-height);
   padding: 1.5rem;
+  position: relative;
+  float: left;
+  width: 100%;
 }
 
 .footer p {

src/css/tiles.css

@@ -9,18 +9,6 @@
   flex-wrap: wrap;
 }
 
-@media screen and (max-width: 1140px) {
-  .tile {
-    width: calc((100% / 2) - 1rem);
-  }
-}
-
-@media screen and (max-width: 640px) {
-  .tile {
-    width: 100%;
-  }
-}
-
 .doc.tiles-page .sectionbody > hr {
   display: none;
 }
@@ -31,16 +19,34 @@
   /* margin: 20px 40px 20px 0; */ /* activate if only 2 tiles per row is preferred */
   padding: 1rem;
   width: calc((100% / 3) - 1.35rem);
-  height: 220px;
   border-top: 8px solid var(--tile-border-top-color);
   background-color: var(--tile-background-color);
 }
 
+.tile .content {
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  height: 100%;
+}
+
 .tile .content .paragraph {
   margin: 0;
   width: 100%;
 }
 
+@media screen and (max-width: 1140px) {
+  .tile {
+    width: calc((100% / 2) - 1rem);
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .tile {
+    width: 100%;
+  }
+}
+
 .tile .title p {
   color: var(--tile-title-font-color);
   font-style: normal;
@@ -52,9 +58,15 @@
   font-style: normal;
 }
 
+.tile .content .paragraph.text {
+  margin-bottom: 1rem;
+}
+
+.tile .content .paragraph.link {
+  margin-top: auto;
+}
+
 .tile .link p {
-  margin-top: 10px;
   width: 100%;
   font-size: calc(15.5 / var(--rem-base) * 1rem);
-  text-align: center;
 }