Fix Hero picture border radius

[danielguillan]

Summary

Fixes the missing border radius on Hero.Image when rendered as a picture element.

This regression was introduced in #1281, when Hero layout classes moved from the nested img to the picture wrapper.

List of notable changes:

• fixed the nested img to inherit the computed Hero border radius
• added a dedicated picture story and visual regression coverage

What should reviewers focus on?

• Verify the Picture (left + bottom) story renders the same rounded corners as a regular Hero image.

Steps to test:

1. Open Storybook.
2. Verify all four image corners use the expected Hero border radius.

Screenshots:

Before	After

[changeset-bot]

🦋 Changeset detected

Latest commit: 580e9bb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@primer/react-brand	Patch
@primer/brand-docs	Patch
@primer/brand-css	Patch
@primer/brand-primitives	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	Patch
@primer/brand-mcp	Patch
@primer/brand-config	Patch
@primer/brand-storybook	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🟢 No design token changes found

[Copilot]

Pull request overview

This PR fixes the Hero media border radius when Hero.Image renders as a <picture> element (where the rounded corners weren’t being applied to the nested <img>), and adds coverage to prevent regressions.

Changes:

• Updated Hero CSS so an <img> inside .Hero-image inherits the intended border radius.
• Added a Storybook story for the <picture> variant and a corresponding Playwright visual regression test.
• Added a changeset documenting the patch.

Show a summary per file

File	Description
packages/react/src/Hero/Hero.module.css	Applies border-radius: inherit to the nested <img> when .Hero-image is a <picture>.
packages/react/src/Hero/Hero.images-videos.stories.tsx	Adds a new “Picture (left + bottom)” story using Hero.Image as="picture".
packages/react/src/Hero/Hero.visual.spec.ts	Adds a visual snapshot test for the new “Picture (left + bottom)” story.
.changeset/fuzzy-years-smile.md	Publishes the fix as a patch for @primer/react-brand.

Review details

• Files reviewed: 4/5 changed files
• Comments generated: 0
• Review effort level: Low

[github-actions]

🟢 Bundle size report

Check	Main	Branch	Change
UMD — full bundle (JS)	101.39 kB	101.39 kB	🟢 No change
UMD — full bundle (CSS)	67.01 kB	66.97 kB	✅ -42 B (-0.1%)
ESM — full bundle (JS + CSS)	1.51 MB	1.51 MB	⬆️ +44 B (+0.0%)
ESM — tree-shaken simple (Button)	69.92 kB	69.94 kB	⬆️ +14 B (+0.0%)
ESM — tree-shaken complex (ActionMenu)	78.82 kB	78.83 kB	⬆️ +14 B (+0.0%)

[github-actions]

🟢 No unit test coverage changes found

All components and hooks with tests maintain the same coverage as the main branch.

[github-actions]

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.