🐛 [BUG] - Hero Image does not take full width when leveraging "picture" tag

[seangolob]

Describe the bug

I am trying to leverage the picture HTML tag in the Hero.Image component to leverage the sources attribute for better performance on smaller devices.

However, when I add the as="picture" prop to the Hero.Image, the Hero image does not always take the full width of it's container.

Context

I think the fix is to apply a width: 100% style to the picture component wrapping the img tag found here: https://github.com/primer/brand/blob/main/packages/react/src/Image/Image.tsx#L68

Currently, the img has 100% width but it does not fit its container since it is wrapped in a picture that does not have 100% width on it.

Reproduction steps

This bug is not currently live so I cannot link to a direct instance that is in production. I noticed this bug while enhancing the `Hero.Image`.

1. Render a `Hero` component with a `Hero.Image` that looks like this:


<Hero.Image 
  position="block-end" 
  src="REPLACE ME WITH DUMMY IMAGE"
  alt=""
/>


You should see the Hero Image take the full width of the content of the page (1248px).

2. Leverage the `as="picture"` prop in the `Hero.Image`. The implementation should look like:


<Hero.Image
  as="picture"
  position="block-end"
  src="REPLACE ME WITH DUMMY IMAGE"
  sources={[.....]}
  alt=""
/>


The `Hero.Image` no longer takes up the full width of the page.

Expected behavior

I would expect the `Hero.Image` to take the full width of the page. I do not think leveraging the `picture` tag should affect the layout of the image.

Screenshots

Before (without as="picture" prop):

After (leveraging as="picture" prop):

Browsers

No response

OS

No response