feat(Space): add innerSpace prop with media query breakpoints support (…

…#2790)

This allows such things:

```jsx
<Space
  innerSpace={{
    small: 'large x-small',
    medium: true,
    large: {
      top: '2rem',
      left: '16px',
      bottom: 'large',
      right: '5rem',
    },
  }}
>
  <P>Content</P>
</Space>
```

All of the media query logic happens in CSS, so it will serve SSR apps
very well.

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx

@@ -103,7 +103,7 @@ The support for Web Components, Vue and Angular was discontinued and removed.
 
 ## Breakpoints
 
-Some [breakpoints](https://eufemia.dnb.no/uilib/usage/layout/media-queries) sizes have changed:
+Some [breakpoints](/uilib/usage/layout/media-queries) sizes have changed:
 
 - **xx-large:** `1280` is now `1440` – and `80em` is now `90em`
 - **x-large:** `1152` is now `1280` – and `72em` is now `80em`
@@ -377,7 +377,7 @@ The Anchor was moved from `/elements` to `/components`.
 
 ### [Lists](/uilib/elements/lists)
 
-1. New **Definition List** layout direction: `direction="horizontal"` including `Dl.Item` [demo](https://eufemia.dnb.no/uilib/elements/lists/#definition-list-in-horizontal-direction).
+1. New **Definition List** layout direction: `direction="horizontal"` including `Dl.Item` [demo](/uilib/elements/lists/#definition-list-in-horizontal-direction).
 
 ### [InputMasked](/uilib/components/input-masked)
 

packages/dnb-design-system-portal/src/docs/uilib/helpers/sass.mdx

@@ -81,13 +81,13 @@ Use the `allAbove`, `allBelow` and `allBetween` mixins to add media queries to y
 ```scss
 @import '@dnb/eufemia/style/core/utilities.scss';
 
-@include allBelow(large) {
+@include allBelow(small) {
 }
 
-@include allAbove(small) {
+@include allBetween(small, medium) {
 }
 
-@include allBetween(small, large) {
+@include allAbove(medium) {
 }
 ```
 

packages/dnb-design-system-portal/src/docs/uilib/layout/media-queries.mdx

@@ -26,6 +26,24 @@ UX designers are using a 12 column system during their design processes.
 | 960   | `medium` | **60em** | `--layout-medium` | 6 columns  |
 | 1152  | `large`  | **72em** | `--layout-large`  | 12 columns |
 
+### Breakpoint ranges
+
+Application in DNB do actually break only twice (`small` and `medium`). But have a max-width of `large`.
+
+So when dealing with naming of breakpoint ranges (between breakpoints), we actually use the term `large` when a media query breaks on `medium`:
+
+| Name     | Range             | Mixin                       | Columns |
+| -------- | ----------------- | --------------------------- | ------- |
+| `small`  | from 0 to 40em    | `allBelow(small)`           | 4       |
+| `medium` | from 40em to 60em | `allBetween(small, medium)` | 6       |
+| `large`  | from 60em         | `allAbove(medium)`          | 12      |
+
+An example is the `innerSpace` property of the [Space](/uilib/layout/space/demos/#responsive-innerspace)-component.
+
+### Unknown sizes
+
+When dealing with breakpoints; UX often designs only for two sizes. This leads is with a unknown size in between. So check with your UXer your applications should behave for when the screen size is in between.
+
 ## MediaQuery component and React Hooks
 
 Both the component and the React Hooks uses the JavaScript API [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).