Address docs page style issues

styles/_cards.scss

@@ -37,6 +37,14 @@ a.card:hover h3 {
     background-size: contain;
   }
 
+  &.row-cols-1 .card {
+    // Give cards some breathing room (but not in the 2×2 ones)
+    min-height: 264px;
+    @include media-breakpoint-up(md) {
+      min-height: 347px;
+    }
+  }
+
   a.card {
     transition: all 0.35s ease-out;
     cursor: pointer;

styles/_pages.scss

@@ -205,6 +205,15 @@
     @include media-breakpoint-down(md) {
       margin-bottom: 2.5rem;
     }
+
+    @include media-breakpoint-up(lg) {
+      .row .col-lg-6:first-child {
+        padding-right: 40px;
+      }
+      .row .col-lg-6:last-child {
+        padding-left: 40px;
+      }
+    }
   }
 
   #software-and-sdks .card-deck {
@@ -261,7 +270,6 @@
 }
 
 .page-references {
-  // TODO: unique card footer images (these ones are reused at random)
   #refs-types .card-deck {
     .card:nth-child(1) .card-footer {
       background-image: url(../img/cards/3col-orange-2.svg);

styles/_status-labels.scss

@@ -52,7 +52,7 @@
     border-radius: 50px;
     margin-left: 0.5rem;
     font-weight: 400;
-    line-height: 22px;
+    line-height: 23px;
     font-size: 16px;
     padding: 0;
     margin-top: -2px;

template/page-docs.html.jinja

@@ -62,8 +62,8 @@
 
   <section class="container-new mb-50-until-sm" id="doc-types">
     <div class="d-flex flex-column-reverse col-sm-8 p-0">
-      <h2 class="h4">{% trans %}Article Types{% endtrans %}</h2>
+      <h2 class="h4">{% trans %}Article types{% endtrans %}</h2>
-      <h6 class="green-500 mb-3">{% trans %}Read Up First{% endtrans %}</h6>
+      <h6 class="green-500 mb-3">{% trans %}Dive In{% endtrans %}</h6>
     </div>
     {% set curated_cards = currentpage.children|selectattr("html","ne","by-label.html")|selectattr("html","ne","faq.html")|map(attribute="html")|list %}
     {% set mobile_cols = 1 %}
@@ -73,7 +73,7 @@
 
   <section class="container-new mb-50-until-sm" id="run-a-network-node">
     <div class="d-flex flex-column-reverse col-sm-8 p-0">
-      <h2 class="h4">{% trans %}Run an XRP Ledger Network Node{% endtrans %}</h2>
+      <h2 class="h4">{% trans %}Run an XRP Ledger network node{% endtrans %}</h2>
       <h6 class="green-500 mb-3">{% trans %}Participate in the Network{% endtrans %}</h6>
     </div>
     {% set curated_cards = [
@@ -86,7 +86,10 @@
   </section><!--/#run-a-network-node-->
 
 <section class="container-new mb-50-until-sm" id="docs-hot-topic">
-  <h2 class="h4">{% trans %}Hot Topic: NFTs{% endtrans %}</h2>
+  <div class="d-flex flex-column-reverse col-sm-8 p-0">
+    <h2 class="h4">{% trans %}NFTs{% endtrans %}</h2>
+    <h6 class="green-500 mb-3">{% trans %}Hot Topic{% endtrans %}</h6>
+  </div>
   <div class="row">
     <div class="col-lg-6">
       <p class="longform">{% trans %}Interested in non-fungible tokens, but concerned about their <a href="impact.html">large carbon footprint</a>? Check out these proposed standards for issuing NFTs on the XRP Ledger:{% endtrans %}</p>
@@ -103,7 +106,7 @@
 
 <section class="container-new mb-50-until-sm doc-index">
   <div class="d-flex flex-column-reverse col-sm-8 p-0">
-    <h2 id="full-doc-index" class="h4">{% trans %}Full Documentation Index{% endtrans %}</h2>
+    <h2 id="full-doc-index" class="h4">{% trans %}Full documentation index{% endtrans %}</h2>
     <h6 class="green-500 mb-3">{% trans %}See Everything{% endtrans %}</h6>
   </div>