A couple little tweaks to keep the hero contents visible on mobile

web/themes/custom/agarica/patternlibrary/agaric/css/agaric.css

@@ -10401,7 +10401,6 @@ a.navbar-item[href="/search"].is-active::before {
 @media screen and (min-width: 769px), print {
   .titlebar .titlebar_title .subtitle,
   .titlebar .titlebar_title .title {
-    margin: 0;
     color: currentColor;
   }
 }
@@ -10802,6 +10801,9 @@ a.teaser:hover .subtitle {
 .hero-main a:focus .icon {
   color: #CBC219;
 }
+.hero-main .hero-body {
+  padding-block: 7rem 5rem;
+}
 
 .hero.is-blue {
   color: #FFFFFF;

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_component.hero.scss

@@ -37,6 +37,9 @@
       color: $dandelion-light;
     }
   }
+  .hero-body {
+    padding-block: 7rem 5rem;
+  }
 }
 
 .hero.is-blue {

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_component.titlebar.scss

@@ -19,7 +19,7 @@
     @include tablet {
       .subtitle,
       .title {
-        margin: 0;
+        // margin: 0;
         color: currentColor;
       }
     }

web/themes/custom/agarica/patternlibrary/agaric/templates/paragraph/paragraph--title.html.twig

@@ -85,7 +85,10 @@
       <div class="container">
         <div class="titlebar">
           <div class="titlebar_title">
-            <h1 class="title is-2">{{ content.field_title.0 }}</h1>
+            <h1 class="title is-spaced is-2">{{ content.field_title.0 }}</h1>
+            {% if paragraph.field_subtitle.value %}
+              <h2 class="subtitle is-4 mt-4">{{ content.field_subtitle.0 }}</h2>
+            {% endif %}
           </div>
         </div>
       </div>