Bug: Responsive behavior for hero does not align with that of other components

[natalia-fitzgerald]

Describe the bug
For the majority of CFPB components, we go down the the next heading level at 600px width and below. For the Hero component, however, the type styling breaks to the next level at 900px wide. This creates a conflict in visual hierarchy between the 900px and 601px width, where you will see the hero heading and the first heading in the main content area styled with the Heading 2 styling.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://www.consumerfinance.gov/data-research/financial-well-being-survey-data/'
2. Look at hero heading and first heading on the page at desktop. Observe that Hero heading gets Heading 1 styling and first heading in the main content area gets Heading 2 styling.
3. View page at 900px wide. Observe that Hero heading gets Heading 2 styling and first heading in the main content area gets Heading 2 styling.

Expected behavior
Hero component responsive behavior should align with that of other components. Hero heading text should go down a level at the 600 and below breakpoint.

Current state

Desktop (901px and above)	Tablet (900 to 601px)	Phone (600 and below)

Expected behavior

Desktop (901px and above)	Tablet (900 to 601px)	Phone (600 and below)

Additional context
Add any other context about the problem here.