fix: article hero spacing between byline and image

[arnest00]

Summary of changes

• Reduce spacing between byline and image on article page on screen sizes of width 48rem and above

On the smallest screen size, the margin below the byline is 2rem, and the margin below the image is 1.5rem. This relationship where the byline margin is slightly larger than the image margin is maintained on screen sizes 48rem and up, while both margins are equal on 80rem and up.

Relevant Links

• Story: ADB-302

Test URLs:

• Before: https://main--adobe-design-website--adobe.aem.page/
• After: https://fix-article-hero-spacing--adobe-design-website--adobe.aem.page/

Checklist

• This PR has code changes, and our linters still pass.
• This PR affects production code, so it was browser tested (see below).

Validation

1. Pull down fix-article-hero-spacing
2. Run npm run start
3. Open an article page on the main branch, and open the same article on your local instance
4. Verify that the byline margin has decreased on the local instance at the largest screen size
5. Inspect spacing on smaller screen sizes

---

Browser Testing

We should aim to support the latest version of the listed browsers. For older versions or other browsers not on the list, content should be accessible, even if it doesn't completely match the designs.

Developers should test as they work in the browsers available on their machines. If they have access to other devices to test other browser/OS combinations, they should do that when possible.

Windows

• Firefox
• Chrome
• Edge

MacOS

• Firefox
• Chrome
• Safari
• Edge

Android

• Firefox
• Chrome
• Edge

iOS

• Safari

[aem-code-sync]

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

• cf24202 ✅ (latest)

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/
🖥️	/