Changing --bs-gutter-x create an overflow issue on mobile

Created by: MathieuAlphamosa

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Changing CSS variable --bs-gutter-x on the row component like this:

.row {
	--bs-gutter-x: 2rem;
}

cause an overflow issue on mobile (x axis). See test case for a demo.

This might be related to this: --bs-gutter-x is used in container component without being defined previously.

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

Note that it should be padding-right: calc(var(--bs-gutter-x, 1.5rem) / 2); anyway... or am I missing something?

Not sure if it should be fixed, but it should be explained in the documentation as it's complicated overflow issue to tackle.

Reduced test cases

https://codepen.io/mathieualphamosa/pen/LYjygme

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome, Safari

What version of Bootstrap are you using?

v5.1.3