Add mediaquery for large screens

Just fix the auto-fitting columns for the cards. All screens have a minwidth of 300px and 1fr for max; on larger screens it's the other way around, max = 300px.

With other solutions I tried, like setting a max width on one of the containers, the hero triangle gets smaller too.

Author: emcoding

app/assets/stylesheets/home.scss

@@ -82,10 +82,17 @@ hr.separator-line {
   display: grid;
   grid-gap: 1rem;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  // ^ make it responsive without mediaqueries:
+  // ^ no media queries needed for smaller screens
   margin-bottom: 3vh;
 }
 
+@media screen and (min-width: 1400px) {
+  .cards {
+    //background-color: deeppink;
+    grid-template-columns: repeat(auto-fit, minmax(1fr, 300px));
+  }
+}
+
 .card {
   background-color: $DJSbackground_grey;
   padding: 1rem;