refactor: style hero title again

assets/css/theme.css

@@ -1827,6 +1827,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     display: none;
   }
 
+  .max-md\:max-w-full {
+    max-width: 100%;
+  }
+
   .max-md\:flex-col {
     flex-direction: column;
   }
@@ -1847,6 +1851,26 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
+  .max-md\:pr-2 {
+    padding-right: 0.5rem;
+  }
+
+  .max-md\:leading-4 {
+    line-height: 1rem;
+  }
+
+  .max-md\:leading-8 {
+    line-height: 2rem;
+  }
+
+  .max-md\:leading-6 {
+    line-height: 1.5rem;
+  }
+
+  .max-md\:leading-5 {
+    line-height: 1.25rem;
+  }
 }
 
 @media not all and (min-width: 640px) {

modules/ps_imageslider/views/templates/hook/slider.tpl

@@ -33,7 +33,7 @@
               <img class="w-full h-full object-contain md:object-cover" src="{$slide.image_url}" alt="{$slide.legend|escape}">
               {if $slide.title || $slide.description}
                 <figcaption class="caption absolute left-1/2 md:left-1/2 bottom-0 top-0 right-1/5 flex flex-col justify-center">
-                  <h2 class="max-sm:max-w-full max-sm-pr-2 text-lg md:text-3xl lg:text-4xl xl:text-6xl font-bold mb-2 md:mb-4">{$slide.title}</h2>
+                  <h2 class="max-md:max-w-full max-md:pr-2 max-md:leading-5 text-lg md:text-3xl lg:text-4xl xl:text-6xl font-bold mb-2 md:mb-4">{$slide.title}</h2>
                   <div class="text-sm md:text-base font-medium">{$slide.description nofilter}</div>
                 </figcaption>
               {/if}