Polyfill flexbox gap properties

Mostly, for Safari < 14.1

pages/assets/css/_base.css

@@ -20,6 +20,8 @@
   --gray-color-900: #18191f;
   --brand-font-primary: "Inter__subset", "Inter", blinkmacsystemfont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   --brand-font-secondary: "Urbanist__subset", "Urbanist", blinkmacsystemfont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  --companies-column-gap: 2rem;
+  --companies-row-gap: 3rem;
 }
 
 html {
@@ -327,13 +329,22 @@ section.users {
 
 .companies > ul {
   display: flex;
-  column-gap: 2rem;
-  row-gap: 3rem;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
 }
 
+/* flexbox gap polyfill for Safari < 14.1 */
+.companies > ul {
+  margin-left: calc(-1 * var(--companies-column-gap, 0));
+  margin-top: calc(-1 * var(--companies-row-gap, 0));
+}
+
+.companies > ul > * {
+  margin-left: var(--companies-column-gap, 1rem);
+  margin-top: var(--companies-row-gap, 1rem);
+}
+
 .companies > ul p {
   line-height: normal;
 }