[Bug] Reduce Font Size and Increase Bottom Margin of .hero-title on Smaller Screens

[wendy640]

Description

The .hero-title on the Legal Database page appears too large on smaller screens, taking up excessive vertical space and pushing content further down. This affects the overall readability and user experience. Reducing the font size and Increasing the margin would improve readability and visual balance.

Reproduction

1. Access the Legal Database page on a mobile device or reduce the browser window size to a smaller width (e.g., below 768px).
2. Observe the size of the .hero-title and how much vertical space it occupies.
3. Scroll down to see how the content is pushed further down.
4. See the issue with spacing and layout.

Expectation

The .hero-title should have a smaller font size to improve readability and ensure the content is displayed more efficiently without excessive scrolling and also a slightly increased bottom margin on smaller screens to provide better spacing, improving the overall visual layout.

Screenshots

Additional context

• creativecommons/vocabulary: A cohesive system of design for Creative Commons

Resolution

• [x] I would be interested in resolving this bug.

[TimidRobot]

https://github.com/creativecommons/legaldb/labels/%F0%9F%A7%B9%20status%3A%20ticket%20work%20required: Does Vocabulary already handle this?

• If yes, please update ticket description or comment (as able)
• If no, this should be pursued in an issue there first