[OUDS] Add spacing helpers for edge-to-edge, grid security margin and gutter

[vprothais]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

For the Edge to edge

We can create utilities to apply the security margin as a negative margin in order to have an element starting from the edge of the screen. This utilities should be available for left side, right side or both side. We should be able to apply those selector on some breakpoint only (both side on mobile, but only right side on medium)

Following is an example of implementation

.edge-left {
  margin-right: 0;
  margin-left: calc(-1 * var(--bs-container-margin-x));
}

.edge-right {
  margin-right: calc(-1 * var(--bs-container-margin-x));
  margin-left: 0;
}

.edge {
  margin-left: calc(-1 * var(--bs-container-margin-x));
  margin-right: calc(-1 * var(--bs-container-margin-x));
}

.edge-md-left {
  @media (width >= 736px) {
    margin-left: calc(-1 * var(--bs-container-margin-x));
    margin-right: 0;
  }
}

.edge-md-right {
  @media (width >= 736px) {
    margin-right: calc(-1 * var(--bs-container-margin-x));
    margin-left: 0;
  }
}

For the security margin and gutter

We should be able to use a helper to apply the security margin value on any space helper. The same goes for the gutter value.
Not sure if the helper should also use breakpoint since I don't have any use case with breakpoint for now.

Motivation and context

Designers want to be able to define an element as "edge to edge", either on one side or both.
Designers also want to be able to apply the security margin spacing or the gutter responsive value as a margin or padding on any component, either top, right, bottom, left or any combination.