feat: display three lines in page header instead of four

Author: javiercoronadonarvaez

static/css/v3/learn-page.css

@@ -87,7 +87,7 @@
   grid-area: e;
 }
 
-@media (max-width: 1280px) {
+@media (max-width: 1279px) {
   /* Narrower layouts keep the original grid; the column wrappers dissolve so
      the cards are grid items again. */
   .card-masonry {
@@ -112,7 +112,7 @@
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   .card-row {
     grid-template-columns: repeat(1, 1fr);
   }
@@ -135,3 +135,18 @@
     max-width: none;
   }
 }
+
+/* Tablet only: the design stacks the three sentences one per line, but the
+   header's 50% cap swings from 361px to 616px across this range, so no font
+   size makes natural wrapping land on the sentence breaks. Force the breaks and
+   step the size down to fit the narrowest column. Desktop and mobile keep their
+   natural wrapping. */
+@media (min-width: 768px) and (max-width: 1279px) {
+  .learn-page-header h1 {
+    font-size: var(--font-size-2xl);
+  }
+
+  .learn-page-header h1 span {
+    display: block;
+  }
+}

templates/v3/learn_page.html

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