Replace flexbox by grid

Mostly for Safari < 14.1 that does not support gap property.

package-lock.json

@@ -27,7 +27,7 @@
         "eslint-config-standard": "^17.0.0-1",
         "highlight.js": "^9.18.3",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "postcss": "^8.4.6",
+        "postcss": "^8.4.12",
         "postcss-import": "^14.0.2",
         "postcss-preset-env": "^7.3.1",
         "rollup": "^2.67.0",
@@ -6591,9 +6591,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz",
-      "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
+      "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==",
       "dev": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
@@ -7071,21 +7071,27 @@
       "dev": true
     },
     "node_modules/postcss": {
-      "version": "8.4.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.6.tgz",
-      "integrity": "sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==",
+      "version": "8.4.12",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
+      "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
       "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
       "dependencies": {
-        "nanoid": "^3.2.0",
+        "nanoid": "^3.3.1",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-attribute-case-insensitive": {
@@ -15179,9 +15185,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz",
-      "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
+      "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==",
       "dev": true
     },
     "natural-compare": {
@@ -15529,12 +15535,12 @@
       }
     },
     "postcss": {
-      "version": "8.4.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.6.tgz",
-      "integrity": "sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==",
+      "version": "8.4.12",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
+      "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
       "dev": true,
       "requires": {
-        "nanoid": "^3.2.0",
+        "nanoid": "^3.3.1",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       }

package.json

@@ -38,7 +38,7 @@
     "eslint-config-standard": "^17.0.0-1",
     "highlight.js": "^9.18.3",
     "highlightjs-line-numbers.js": "^2.8.0",
-    "postcss": "^8.4.6",
+    "postcss": "^8.4.12",
     "postcss-import": "^14.0.2",
     "postcss-preset-env": "^7.3.1",
     "rollup": "^2.67.0",

pages/assets/css/_base.css

@@ -351,17 +351,15 @@ section.users {
   padding-bottom: 4.375rem;
   margin-left: 2rem;
   margin-right: 2rem;
-  display: flex;
-  justify-content: space-around;
 }
 
 .companies > ul {
-  display: flex;
-  column-gap: 2rem;
-  row-gap: 3rem;
-  flex-wrap: wrap;
+  display: grid;
+  grid-gap: 3rem 2rem;
+  grid-template-columns: repeat(auto-fit, 150px);
   justify-content: center;
   align-items: center;
+  justify-items: center;
 }
 
 .companies > ul p {
@@ -410,8 +408,7 @@ section.about {
 }
 
 section.about .columns {
-  display: flex;
-  flex-direction: column;
+  display: grid;
   gap: 3rem;
 }
 
@@ -427,8 +424,7 @@ section.about .columns {
   }
 
   section.about .columns {
-    flex-direction: row;
-    justify-content: flex-end;
+    grid-template-columns: 4fr 6fr;
     gap: 4.5rem;
   }
 }
@@ -453,16 +449,10 @@ section.about .columns {
   }
 }
 
-section.about .columns > .column:first-child {
-  display: flex;
-  flex-direction: column;
-  flex: 0 0 40%;
-}
-
-section.about .columns > .column:nth-child(2) {
-  max-width: 1024px;
-  display: flex;
-  justify-content: flex-end;
+@media screen and (min-width: 1100px) {
+  section.about .columns > .column:first-child {
+    padding-left: 1rem;
+  }
 }
 
 section.about .imageblock img {