homepage: fix black box below cards on certain screen sizes

_includes/homepage.vto

@@ -33,5 +33,7 @@
         <div class="mi-card--text">{{ card.text }}</div>
       </a>
     {{ /for }}
+
   </main>
+  <div class="mi-page-filler"></div>
 {{ /layout }}

styles.css

@@ -69,6 +69,13 @@ h4 {
   width: 100vw;
 }
 
+.mi-page-filler {
+  width: 100%;
+  padding: 0;
+  flex-basis: 0;
+  flex-grow: 1;
+}
+
 .mi-border {
   pointer-events: none;
   z-index: 10;
@@ -317,7 +324,7 @@ h4 {
 .mi-main {
   background: var(--background);
   margin: 0 var(--box-padding);
-  flex-grow: 1;
+  flex-grow: 0;
   position: relative;
   margin-bottom: var(--box-padding);
 }
@@ -346,6 +353,7 @@ h4 {
   background: var(--foreground);
   grid-gap: 1px;
   grid-template-columns: 1fr;
+  padding-bottom: 1px;
 }
 
 @media screen and (min-width: 800px) {