fix(docs-infra): improve the layout and appearance of the "Press kit" page (#40945)

This commit improves the layout and appearance of the "Press kit" page.
Most notable changes include:
- Center content and limit max width to 50em (which is 50px by default).
- Remove uppercase transform for headings.
- Use a two-column layout for icons (instead of one icon per row).
- Show "download" icons next to download links.

Before (wide): ![presskit page (wide) before][1]
Before (narrow 1/2): ![presskit page (narrow 1/2) before][2]
Before (narrow 2/2): ![presskit page (narrow 2/2) before][3]
After (wide): ![presskit page (wide) after][4]
After (narrow 1/2): ![presskit page (narrow 1/2) after][5]
After (narrow 2/2): ![presskit page (narrow 2/2) after][6]

This change is based on code from #36045.

[1]: https://user-images.githubusercontent.com/8604205/108739632-80d79900-753d-11eb-8ddc-ac542ec5b3ac.png
[2]: https://user-images.githubusercontent.com/8604205/108739641-82a15c80-753d-11eb-9b20-8119ad117460.png
[3]: https://user-images.githubusercontent.com/8604205/108739643-83d28980-753d-11eb-8afa-2d7a5e87d586.png
[4]: https://user-images.githubusercontent.com/8604205/108739638-8208c600-753d-11eb-99bb-ea119640de39.png
[5]: https://user-images.githubusercontent.com/8604205/108739642-8339f300-753d-11eb-9b25-5c1988adb1dd.png
[6]: https://user-images.githubusercontent.com/8604205/108739645-846b2000-753d-11eb-8ef3-b6a8b7c6d1ff.png

Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>

PR Close #40945

aio/src/styles/0-base/_typography.scss

@@ -227,3 +227,7 @@ code {
     }
   }
 }
+
+.error-text {
+  color: $brightred;
+}

aio/src/styles/1-layouts/_layout-global.scss

@@ -7,6 +7,11 @@ body,
   background-color: $white;
 }
 
+.center-layout {
+  margin: 0 auto;
+  max-width: 50em;
+}
+
 .github-links + .content h1 {
   max-width: 90%;
 }

aio/src/styles/2-modules/_presskit.scss

@@ -1,78 +1,60 @@
 .presskit-container {
   padding: 0 32px 32px 32px;
 
-  h2 {
+  img {
-    color: #37474F;
+    height: 128px;
+    width: auto;
   }
 
-  .l-space-left-3 {
+  .presskit-section {
-    margin-left: 3 * 8px;
+    .presskit-icon-group {
-  }
-
-  .cc-by-anchor {
-    text-decoration: underline;
-    color: grey !important;
-  }
-
-  .presskit-row {
-    margin: 48px 0;
-    width: 100%;
-
-    &:first-child {
-      margin-top: 0;
-    }
-
-    .presskit-inner {
       display: flex;
-      align-items: center;
+      flex-wrap: wrap;
 
-      @media(max-width: 599px) {
+      .presskit-icon-item {
-        flex-direction: column;
+        align-items: center;
-      }
+        display: flex;
+        margin: 1rem;
+        width: calc(50% - 2rem);
 
-      h3 {
+        @media screen and (max-width: 600px) {
-        font-weight: 500;
+          align-items: flex-start;
-        margin-top: 0;
+          flex-direction: column;
-        margin-bottom: 0;
+          margin-bottom: 2rem;
-        color: #455A64;
-
-        @media(max-width: 599px) {
-          padding-bottom: 16px;
-        }
-      }
-
-      .transparent-img-bg {
-        margin-top: 10px;
-        border-radius: 4px;
-        width: 128px;
-        height: 128px;
-        background-color: #34474F;
-      }
-
-      ul {
-        padding: 0;
-        list-style-type: none;
-
-        @media(max-width: 599px) {
-          padding: 0 !important;
-          margin: 0 !important;
         }
 
-        li {
+        .presskit-image-container {
-          margin: 0 0 8px 0;
+          flex: none;
+          margin-right: 2rem;
+
+          @media (max-width: 600px) {
+            width: 100%;
+            margin-right: 0;
+          }
+
+          .transparent-img {
+            background-color: $deepgray;
+            border-radius: 50%;
+          }
         }
-      }
-    }
 
-    .presskit-image-container {
+        .presskit-links-container {
-      @media(max-width: 599px) {
+          list-style-type: none;
-        text-align: center;
+          margin-bottom: 0;
-      }
+          padding: 0;
 
-      img {
+          a {
-        height: 128px;
+            display: flex;
-        width: auto;
+            align-items: center;
-        margin-bottom: 8px * 2;
+
+            &:after {
+              font-family: 'Material Icons';
+              content: 'cloud_download';
+              @include font-size(24);
+              margin-left: 0.5rem;
+            }
+          }
+        }
       }
     }
   }