Merge pull request #47 from stackabletech/refactor/boxes-css

refactor: Use CSS `grid` instead of `flex` for boxes wrapper

src/css/landing.css

@@ -1,17 +1,12 @@
 .boxes {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  display: grid;
+  column-gap: 1rem;
+  row-gap: 2rem;
+  grid-template-columns: 1fr 1fr 1fr;
 }
 
-.box {
-  flex: 0 30%;
-  min-height: 200px;
-  margin-bottom: 2%; /* (200-32*3)/2 */
-}
-
-.boxes.two-column .box {
-  flex: 0 48%;
+.boxes.two-column {
+  grid-template-columns: 1fr 1fr;
 }
 
 .box h3 {
@@ -31,13 +26,13 @@
 }
 
 @media screen and (max-width: 1023.5px) {
-  .box {
-    flex: 0 47% !important;
+  .boxes {
+    grid-template-columns: 1fr 1fr;
   }
 }
 
 @media screen and (max-width: 768px) {
-  .box {
-    flex: 0 100% !important;
+  .boxes {
+    grid-template-columns: 1fr;
   }
 }