fix(blog pages): accessibility, tags

[helms-charity]

This fixes styling for the subheading in ticket #172 .
It also has CSS fixes to allow for all the H1 + H2 changes I have made to the blog changes in order to increase accessibility score.

Also this puts tags ABOVE picture + author-bio, instead of BELOW the H1, since we may or may not have that lede paragraph.

Also has a quick fix for teaser-list font bug I introduced...

Issue

Fix #210

Test URLs

• Before: https://main--merative2--hlxsites.hlx.page/blog/test-article-1
• After: https://210-seoblogs--merative2--hlxsites.hlx.page/blog/test-article-1
• Before: https://main--merative2--hlxsites.hlx.page/blog/human-centered-design-solves-business-problems
• After: https://210-seoblogs--merative2--hlxsites.hlx.page/blog/human-centered-design-solves-business-problems

Description

CSS was added as seen via https://www.figma.com/file/5N1U4VkQfWxw72KLGFwHcj/Blog-article-additions?type=design&node-id=3-167&t=D5KcIKRLZmhFFsdM-0 .

[aem-code-sync]

Hello, I'm Franklin Bot and I will run some test suites that validate the page speed.
In case there are problems, just click the checkbox below to rerun the respective action.

• Re-run PSI Checks

[aem-code-sync]

Page	Scores	Audits	Google
/blog/test-article-1

[proeung]

@helms-charity The subhead is rendering, however, styles are missing. See below for suggestions or I'm happy to open a follow up PR to address the styling once these changes are merged down.

/* text max contianer */
--text-max-container: 648px;

p.lede {
  font-size: var(--font-size-18);
  max-width: var(--text-max-container);
}

/* Article subhead for desktop*/
p.lede {
    font-size: var(--font-size-24);
 }

[aem-code-sync]

Page	Scores	Audits	Google
/blog/test-article-1		Lighthouse returned error: Something went wrong.

[aem-code-sync]

Page	Scores	Audits	Google
/blog/human-centered-design-solves-business-problems
/blog/test-article-1

[aem-code-sync]

Page	Scores	Audits	Google
/blog/human-centered-design-solves-business-problems
/blog/test-article-1