Fix breadcrumb styling

[janbrasna]

Description

Fixes positioning bug in wider layouts and makes the overall alignment more consistent with other navigation items.

• The breakpoints mirror what .mzp-l-content sets horizontally, using exactly the same tokens.
• The updated spacing and padding is to match existing nav elements, to look aligned next to each other, whether stacked with submenu on desktop or aligned to its dropdown version on mobile etc.
• Since the breadcrumb link has underline removed, this also adds it back on hover for a little affordance, as the change from #0060df to #0250bb is not really noticeable. (Consumers often do this, or the other way around with underline in og state.)

TODO:

(Q: now $mq-lg looks a little out of place; also consider $spacing vs $layout vs $h-grid? TBC check where the existing lg metric math actually comes from…)

🚧 Revisit the component default state (i.e. SM vs XS size?) as shown in the component preview difference:
https://preview--mzp-dev.netlify.app/components/detail/breadcrumb
vs.
https://main--mzp-dev.netlify.app/components/detail/breadcrumb

• I have documented this change in the design system.
• I have recorded this change in CHANGELOG.md.

Issue

Resolves #933

Testing

see bedrock issues and pages to test mozilla/bedrock#14081 (comment)