SHS-5561: Implementation: Responsive styles for h4 and h5 (#1497)

* feat(shs-5561): make h4/h5/h6 responsive

* fix(shs-5561): update card title styles to make it independent of hb-heading-5

docroot/themes/humsci/humsci_basic/src/scss/components/_card.scss

@@ -433,22 +433,26 @@
     h4,
     h5,
     h6 {
-      @include hb-heading-5;
       margin: 0;
+      font-weight: hb-theme-font-weight(semibold);
       overflow-wrap: break-word;
 
       @include hb-traditional {
         font-size: hb-calculate-rems(20px);
+        line-height: 126%;
+      }
+
+      @include hb-themes(('colorful', 'airy')) {
+        font-size: hb-calculate-rems(18px);
+        line-height: 124%;
       }
 
       @include grid-media-min('sm') {
-        font-weight: hb-theme-font-weight(semibold);
         font-size: hb-calculate-rems(24px);
         line-height: 124%;
       }
 
       @include grid-media-min('md') {
-        font-weight: hb-theme-font-weight(semibold);
         font-size: hb-calculate-rems(27px);
         line-height: 119%;
       }
@@ -460,20 +464,19 @@
       .ptype-hs-row & {
         @include hb-themes(('colorful', 'airy')) {
           @include grid-media-min('sm') {
-            @include hb-heading-5;
+            font-size: hb-calculate-rems(18px);
+            line-height: 124%;
           }
 
           @include grid-media-min('lg') {
-            font-weight: hb-theme-font-weight(semibold);
             font-size: hb-calculate-rems(20px);
-            line-height: 124%;
           }
         }
 
         @include hb-traditional {
           @include grid-media-min('sm') {
-            @include hb-heading-5;
             font-size: hb-calculate-rems(22px);
+            line-height: 126%;
           }
         }
       }

docroot/themes/humsci/humsci_basic/src/scss/tools/_mixins.text.scss

@@ -109,12 +109,20 @@
     font-weight: hb-theme-font-weight(semibold);
     font-size: hb-calculate-rems(20px);
     line-height: 122%;
+
+    @include grid-media-min('md') {
+      font-size: hb-calculate-rems(22px);
+    }
   }
 
   @include hb-traditional {
     font-weight: hb-theme-font-weight(semibold);
     font-size: hb-calculate-rems(18px);
     line-height: 124%;
+
+    @include grid-media-min('md') {
+      font-size: hb-calculate-rems(20px);
+    }
   }
 }
 
@@ -123,12 +131,20 @@
     font-weight: hb-theme-font-weight(semibold);
     font-size: hb-calculate-rems(18px);
     line-height: 124%;
+
+    @include grid-media-min('md') {
+      font-size: hb-calculate-rems(20px);
+    }
   }
 
   @include hb-traditional {
     font-weight: hb-theme-font-weight(semibold);
     font-size: hb-calculate-rems(16px);
     line-height: 126%;
+
+    @include grid-media-min('md') {
+      font-size: hb-calculate-rems(18px);
+    }
   }
 }
 
@@ -139,12 +155,20 @@
     font-weight: hb-theme-font-weight(semibold);
     font-size: hb-calculate-rems(16px);
     line-height: 128%;
+
+    @include grid-media-min('md') {
+      font-size: hb-calculate-rems(18px);
+    }
   }
 
   @include hb-traditional {
     font-weight: hb-theme-font-weight(bold);
     font-size: hb-calculate-rems(14px);
     line-height: 124%;
+
+    @include grid-media-min('md') {
+      font-size: hb-calculate-rems(16px);
+    }
   }
 }