[River] Responsive spacing

[josepmartins]

Summary

New and updated spacing tokens on the River component aiming for a responsive logic in both gap and padding values of the main container

New padding values are:

Viewport	Padding
Small (mobile)	28px -> total of 56px when used stacked
Medium (tablet)	36px -> total of 72px when used stacked
Large	48px -> total of 96px when used stacked

New gap values are:

Viewport	Padding
Small (mobile)	24px
Medium (tablet)	32px
Large	48px

List of notable changes:

• updated margin for small/medium/large-padding token
• updated gap for small/medium/large-gap token
• updated River.module CSS with new media queries values

What should reviewers focus on?

• Storybook/docs with stacked River examples reacting to different viewports

Steps to test:

1. Open the # component in CI-deployed preview environment
2. Go to # story in Storybook
3. Verify that # behaves as described in the following issue.

Supporting resources (related issues, external links, etc):

• Tracking issue: https://github.com/github/primer/issues/2112

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• New visual snapshots have been generated / updated for any UI changes
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Please try to provide before and after screenshots or videos

Before	After
actual.mp4	new.mp4

[changeset-bot]

🦋 Changeset detected

Latest commit: 9736c9c

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

This PR includes changesets to release 6 packages

Name	Type
@primer/brand-primitives	Patch
@primer/react-brand	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	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]

🔍 Design token changes found

View CSS variable changes

- --brand-River-layout-margin-vertical: var(--base-size-48) 0;
+ --brand-River-heading-margin: var(--base-size-8);

[github-actions]

🟢 No visual differences found

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

[rezrah]

New spacing looks great 👍