fix(docs-infra): improve card layout for different browser font sizes (#42533)

Remove the fixed height set on the card elements present in angular.io,
allowing the cards to have a dynamic height derived from their content
and thus removing overflow issues related to the browser's font-size,
make other minor css related adjustments to allow the card to look good
on the different browser's font-size settings

PR Close #42533

aio/src/styles/1-layouts/marketing-layout/_marketing-layout.scss

@@ -173,12 +173,11 @@ section#intro {
 // ANGULAR LINE
 
 .home-row .card {
-  @include mixins.card(70%, auto);
+  @include mixins.card(70%);
   display: flex;
   flex-direction: row;
   align-items: center;
   position: relative;
-  width: 70%;
   min-width: 350px;
   height: auto;
   margin: auto;

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

@@ -9,13 +9,14 @@
   margin: 16px 0;
 
   .docs-card {
-    @include mixins.card(194px, 35%);
+    @include mixins.card(35%);
 
     max-width: 340px;
     min-width: 300px;
     margin: 24px 16px;
-    padding-bottom: 48px;
-    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 
     @media screen and (max-width: 600px) {
       width: 100%;
@@ -27,7 +28,7 @@
       @include mixins.font-size(20);
       @include mixins.line-height(24);
       margin: 0;
-      padding: 32px 0 24px;
+      padding: 2.7rem 0 2.1rem;
       text-transform: none;
       text-align: center;
     }
@@ -37,16 +38,15 @@
       @include mixins.line-height(24);
       padding: 0 16px;
       margin: 0;
+      margin-bottom: 1.6rem;
       text-align: center;
     }
 
     .card-footer {
-      bottom: 0;
+      margin-bottom: 0;
       box-sizing: border-box;
-      @include mixins.line-height(48);
-      left: 0;
-      position: absolute;
-      right: 0;
+      @include mixins.line-height(24);
+      padding: 1.3rem 15px;
       text-align: right;
 
       a {

aio/src/styles/_mixins.scss

@@ -47,8 +47,7 @@
 }
 
 // INFO CARD SKELETON
-@mixin card($height, $width) {
-  height: $height;
+@mixin card($width) {
   width: $width;
   border-radius: 4px;
   box-shadow: 0 2px 2px rgba(constants.$black, 0.24), 0 0 2px rgba(constants.$black, 0.12);