enhance(homepage): better socials block on homepage (#4472)

site/gdocs/pages/Homepage.scss

@@ -96,6 +96,21 @@
 }
 
 .homepage-social-ribbon__social-list {
+    grid-template-columns: 1fr; // fallback for browsers that don't support `max()` below.
+
+    // A bunch of magic CSS! Let me explain.
+    // The goal here is to span the social links over 1 or 2 columns, ensuring that each column is at least 120px wide.
+
+    // The width of a column if there are precisely 2 columns - we don't want to have more than 2 columns here.
+    --half-width: calc(50% - var(--grid-gap) / 2);
+    // A column should be at least 128px wide, but can grow to fill the available space to ensure we don't create more than 2 columns.
+    --min-column-width: max(var(--half-width), 128px);
+    // We want to fit 1 or 2 columns into the available space, depending on available width.
+    grid-template-columns: repeat(
+        auto-fit,
+        minmax(var(--min-column-width), 1fr)
+    );
+
     margin-top: 16px;
     li {
         list-style: none;
@@ -108,6 +123,11 @@
         a {
             color: $blue-90;
             font-weight: bold;
+
+            .icon {
+                display: inline-block;
+                width: 25px;
+            }
         }
         svg {
             margin-right: 8px;

site/gdocs/pages/Homepage.tsx

@@ -36,7 +36,7 @@ const SocialSection = () => {
             </section>
             <section className="homepage-social-ribbon__social-media span-cols-4 span-sm-cols-12 col-sm-start-2">
                 <h2 className="h2-semibold">Follow us</h2>
-                <ul className="homepage-social-ribbon__social-list grid grid-cols-2 grid-md-cols-1">
+                <ul className="homepage-social-ribbon__social-list grid">
                     {[...SOCIALS, ...RSS_FEEDS].map(({ title, url, icon }) => (
                         <li key={title}>
                             <a