341: Picture cards fine alignment and styling tweaks

[rjwtrmn]

• Adjust border radius, text sizes, spacing for both vertical and horizontal picture cards (content list and featured articles) to match Frontify more closely (https://sap.frontify.com/document/223143#/-/resource-center) and address issues spotted by Elaine (https://adobe-dx-support.slack.com/archives/C06H8UNQ3RS/p1710798138014269?thread_ts=1710770896.748139&cid=C06H8UNQ3RS).
• Vertical picture card now uses flexbox rather than grid to layout contents, as elements (specifically info box for avatar and readtime/date) can vary in height between cards depending on availability of information).
• Text only cards should not be affected.

Fix #341

Test URLs: Content Hub: Before: https://main--hlx-test--urfuwo.hlx.live/topics/ After: https://341-fine-alignment-on-picture-card--hlx-test--urfuwo.hlx.live/topics/

[aem-code-sync[bot]]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed. In case there are problems, just click a checkbox below to rerun the respective action.

• [ ] Re-run PSI checks
• [ ] Re-sync branch

Commits

* [8779df4](https://github.com/urfuwo/hlx-test/commit/8779df41c6320408d5dbf2ea08ddf56573581a68) :white_check_mark: (latest)

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/topics/

[saurabh-khare]

The author info on the cards is not aligned https://341-fine-alignment-on-picture-card--hlx-test--urfuwo.hlx.page/draft/skhare/author-profiles-validation

[saurabh-khare]

As of now https://main--hlx-test--urfuwo.hlx.page/draft/skhare/author-profiles-validation

[rjwtrmn]

The author info on the cards is not aligned https://341-fine-alignment-on-picture-card--hlx-test--urfuwo.hlx.page/draft/skhare/author-profiles-validation

@saurabh-khare From the designs in Figma I think this is the correct appearance, e.g. https://www.figma.com/file/oSetT4LbatRmXlcB2A7V8Z/Content-Hubs-2024?type=design&node-id=4918-193478&mode=design&t=0iW4LCPTylr2PEvh-0. To me it seems like the author info should always hug the bottom of the card and not be aligned in a row with the other cards, unless there is some info to the contrary from Elaine somewhere?

[saurabh-khare]

Please fix this as well in same PR :)

[rjwtrmn]

Please fix this as well in same PR :)

@saurabh-khare I created a new story for this which I will look at ASAP, the fix was getting a bit too involved for this PR as we probably have to tweak how top padding is applied to all sections https://github.com/urfuwo/hlx-test/issues/501