From 3f7dd758b87da77282589abdd8b052518551cee6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Thu, 9 Apr 2020 23:17:13 +0200
Subject: [PATCH] Locations: Use grid over flexbox

- More flexible and consistent, avoids weird spacing and centering
- TODO: center alone locations on a row?
---
 src/style/molecules/_location.scss  |  9 ---------
 src/style/organisms/_locations.scss | 16 +++++++++-------
 2 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/src/style/molecules/_location.scss b/src/style/molecules/_location.scss
index 4d8185e..40ebf62 100644
--- a/src/style/molecules/_location.scss
+++ b/src/style/molecules/_location.scss
@@ -3,15 +3,6 @@
     position: relative;
     margin-bottom: 48px;
 
-    @include breakpoint (sm) {
-        margin-left: pxVW(72);
-        margin-right: pxVW(72);
-    }
-    @include breakpoint (xl) {
-        margin-left: 72px;
-        margin-right: 72px;
-    }
-
     &, a * {
         will-change: transform, opacity;
     }
diff --git a/src/style/organisms/_locations.scss b/src/style/organisms/_locations.scss
index 4816233..ba88f54 100644
--- a/src/style/organisms/_locations.scss
+++ b/src/style/organisms/_locations.scss
@@ -42,22 +42,24 @@
         min-height: 120px;
         margin-top: 72px;
 
+        @include breakpoint (600px) {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+        }
         @include breakpoint (sm) {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
+            grid-template-columns: repeat(3, 1fr);
+            grid-column-gap: pxVW(96);
+            grid-row-gap: pxVW(120);
             min-height: 200px;
             margin-top: 112px;
             margin-bottom: pxVW(120);
-            // display: grid;
-            // grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            // grid-column-gap: 120px;
-            // grid-row-gap: pxVW(120);
         }
         @include breakpoint (md) {
             margin-bottom: pxVW(232);
         }
         @include breakpoint (xl) {
+            grid-template-columns: repeat(4, 1fr);
+            grid-column-gap: 120px;
             margin-bottom: 232px;
         }
     }