Locations: Use grid over flexbox

- More flexible and consistent, avoids weird spacing and centering
- TODO: center alone locations on a row?

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