SHS-5561: Implementation: Responsive styles for h4 and h5

[cienvaras]

READY FOR REVIEW

Summary

• Update h4/h5/h6 styles to make them responsive
• Update card title styles to make them independent of hb-heading-5 mixin

Need Review By (Date)

04/05

Urgency

medium

Steps to Test

1. Repeat the following steps in Colorful and Traditional:
   a. Create a Flexible page. In the text area, add some text containing h4, h5 and h6 headings. Save the page and confirm that the sizes and line heights match the ones specified un the Text Styles doc.
   b. Edit the Flexible page and add a vertical card. Make sure that it's not inside a collection or any grid. Make sure that the card title sizes and line heights match the ones in the table below.
   c. Visit https://hs-colorful.suhumsci.loc/collections-cards-continued and https://hs-traditional.suhumsci.loc/components/collections-cards-continued. Confirm that the card title sizes and line heights match the ones in the table below.

Card title (outside collection/grid)

Colorful

Item	Base	sm (576px)	md (768px)
Font Size	18px	24px	27px
Line Height	124%	124%	119%

Traditional

Item	Base	sm (576px)	md (768px)
Font Size	20px	24px	27px
Line Height	126%	124%	119%

Card title (inside collection/grid)

Colorful

Item	Base	lg (992px)
Font Size	18px	20px
Line Height	124%	124%

Traditional

Item	Base	sm (576px)
Font Size	20px	22px
Line Height	126%	126%

PR Checklist

• PR Checklist
• Humsci Basic PR Checklist

[mariannuar]

@cienvaras Looks and works as expected!