fix(article-detail): add new design changes for publication placement

[proeung]

Issue

Fixes https://github.com/hlxsites/merative2/issues/236

Description

Changed

• This PR implements the new design treatment for the publication info within Blog detail pages.
• Keep the author's position below the image, but move "Published on" and "Read Time" to be above the image and right below the tags.

Design Specs

• Figma Link - https://www.figma.com/file/vw24IPXXt4vCh9BNumka9A?node-id=5988:24513&mode=design#481441510

Test URLs

• Before (Changes from main): https://main--merative2--hlxsites.hlx.page/drafts/putra/test-blog-detail-page
• After (Changes from this PR): https://fix-760-published-date--merative2--proeung.hlx.page/drafts/putra/test-blog-detail-page

Testing Instruction

• Visit this example page - https://fix-760-published-date--merative2--proeung.hlx.page/drafts/putra/test-blog-detail-page
• Ensure that the changes align with the design specs for all of the support breakpoints

[aem-code-sync[bot]]

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[bot]]

Page	Scores	Audits	Google
/blog/marcy-tatsch-curam
/blog
/blog/meratives-first-year

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/putra/test-blog-detail-page

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/putra/test-blog-detail-page

[sachinmesh]

HI @proeung Everything looks good. Only on tab/mobile, the spacing between published date and time with tags should be 48px, which 32px now.

CC: @keith-kaplan

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/putra/test-blog-detail-page

[proeung]

@sachinmesh Thanks for conducting design QA on this PR. I've added a commit to address the spacing issue you've noted above.

@helms-charity or @sahmad-merative Can I get a code review?

[proeung]

@sachinmesh If these changes look good from a design QA perspective and no further changes are needed, please feel free to remove the "Needs Design QA" label and add the "Ready to merge" label so that the team knows that this work is good to go since we have approval from code + design.

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/drafts/putra/test-blog-detail-page

[sachinmesh]

Good to go. I can't change the label, as i don't have the access to edit the PR. @proeung