PR feedback: Adjust why card size, header width, and grid layout on tablet

Author: jlchilders11

static/css/v3/learn-page.css

@@ -1,6 +1,6 @@
 .learn-page-header {
     width: 100%;
-    max-width: 696px;
+    max-width: calc(50% - .5 * var(--space-card));
     display: flex;
     flex-direction: column;
     gap: var(--space-xl);
@@ -85,10 +85,11 @@
         grid-template-columns: repeat(2, 1fr);
         grid-template-areas:
             "a b"
-            "a c"
-            "e c"
-            "e d"
-            ". d"
+            "a d"
+            "c d"
+            "c d"
+            "c e"
+            "c ."
         ;
     }
 
@@ -99,10 +100,6 @@
     .post-cards {
         max-width: 100%;
     }
-
-    .learn-page-header {
-        max-width: 488px;
-    }
 }
 
 @media (max-width: 768px) {

static/css/v3/why-boost-cards.css

@@ -5,7 +5,7 @@
 
 .why-boost-cards__heading {
   margin: 0 0 var(--space-large);
-  font-size: var(--font-size-medium);
+  font-size: var(--font-size-large);
   font-weight: var(--font-weight-medium);
   font-family: var(--font-display);
 }

templates/v3/learn_page.html

@@ -13,7 +13,7 @@
 {% block content %}
   <div class="px-large">
     <div class="learn-page-header py-large">
-      <h1>Start Anywhere. Learn Everything. Build Anything</h1>
+      <h1>Start anywhere. Learn everything. Build anything</h1>
       <p>A complete, well-documented ecosystem of modern libraries-designed to grow with you.</p>
     </div>
     <div class="card-row py-large">