fix(docs-infra): improve small screen experience for docs cards layout (#31576)

- Make docs cards expand to full width in smaller screen sizes.
- Reduce spacing around card container to match general spacing patterns seen in angular.io.
- Improve SCSS formatting.

PR Close #31576

aio/src/styles/1-layouts/_content-layout.scss

@@ -1,34 +1,36 @@
-aio-shell.page-docs {
-  .sidenav-content {
-    // padding: 6rem 3rem 3rem 3rem; // THIS CAUSES THE TOP NAV TOOLBAR TO JUMP BETWEEN DOCS AND OTHER PAGES
-    margin: auto;
-  }
-}
-
-.sidenav-content {
-  min-height: 100vh;
-  padding: 80px 3rem 2rem;
-}
-
-@media (max-width: 600px) {
-  aio-menu {
-    display: none;
-  }
-
-  .sidenav-content {
-    min-height: 450px;
-    padding: 80px 1rem 1rem;
-  }
-}
-
 .sidenav-container {
   width: 100%;
   height: 100vh;
 }
 
-.sidenav-content button {
+.sidenav-content {
+  min-height: 100vh;
+  padding: 80px 3rem 2rem;
+
+  @media screen and (max-width: 600px) {
+    min-height: 450px;
+    padding: 80px 2rem 1rem;
+  }
+
+  @media screen and (max-width: 480px) {
+    padding: 80px 1rem 1rem;
+  }
+
+  aio-shell.page-docs & {
+    // padding: 6rem 3rem 3rem 3rem; // THIS CAUSES THE TOP NAV TOOLBAR TO JUMP BETWEEN DOCS AND OTHER PAGES
+    margin: auto;
+  }
+
+  button {
     min-width: 24px;
   }
+}
+
+aio-menu {
+  @media (max-width: 600px) {
+    display: none;
+  }
+}
 
 #guide-change-log h2::before {
   content: "";

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

@@ -2,8 +2,7 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    margin: 24px 0;
+    margin: 16px 0;
-}
 
     .docs-card {
       @include card(194px, 30%);
@@ -13,6 +12,12 @@
       padding-bottom: 48px;
       position: relative;
 
+      @media screen and (max-width: 600px) {
+        width: 100%;
+        margin: 8px auto;
+        max-width: none;
+      }
+
       &:hover {
         text-decoration: none;
 
@@ -33,7 +38,6 @@
         }
       }
 
-
       section {
         color: $deepgray;
         @include font-size(20);
@@ -69,10 +73,12 @@
           @include font-size(13);
         }
       }
+
       .card-footer.center {
         text-align: center;
       }
     }
+}
 
 .card-section {
   @include card(auto, 90%);
@@ -87,11 +93,18 @@
     box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
   }
 
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     margin: 8px 0;
   }
 
-  a, .button, button {
+  a,
+  .button,
+  button {
     text-align: center;
   }