From dfb3874eb41b8bbfa0f5de0b32a962687f344fb2 Mon Sep 17 00:00:00 2001
From: Techassi <sascha.lautenschlaeger@stackable.tech>
Date: Tue, 12 Sep 2023 16:32:41 +0200
Subject: [PATCH] Use CSS grid instead of Flex for boxes wrapper

---
 src/css/landing.css | 25 ++++++++++---------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/css/landing.css b/src/css/landing.css
index 9c56913..e139307 100644
--- a/src/css/landing.css
+++ b/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;
   }
 }