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

@@ -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;
     }

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;
+            grid-template-columns: repeat(3, 1fr);
-            flex-wrap: wrap;
+            grid-column-gap: pxVW(96);
-            justify-content: center;
+            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;
         }
     }