Apply suggestions from code review

Co-authored-by: Louis-Maxime Piton <[email protected]>

site/content/docs/0.0/layout/containers.md

@@ -22,7 +22,7 @@ The table below illustrates how each container's `max-width` compares to the ori
 
 See them in action and compare them in our [Grid example]({{< docsref "/examples/grid#containers" >}}) and [Grid system example]({{< docsref "/examples/grid-system" >}}).
 
-Please note that we apply an extra-padding on our containers (see [our mixins](#mixins))
+Please note that we apply an extra-padding on our containers (see [our mixin](#sass-mixins)).
 
 {{< bs-table "table" >}}
 |  | 2X-small<div class="fw-normal">&lt;390px</div> | X-small<div class="fw-normal">&ge;390px</div> | Small<div class="fw-normal">&ge;480px</div> | Medium<div class="fw-normal">&ge;736px</div> | Large<div class="fw-normal">&ge;1024px</div> | X-Large<div class="fw-normal">&ge;1320px</div> | 2X-Large<div class="fw-normal">&ge;1640px</div> | 3X-Large<div class="fw-normal">&ge;1880px</div> |
@@ -57,7 +57,7 @@ Responsive containers allow you to specify a class that follows the `.container-
 **`.container-2xl` is the maximum container recommended in order to be compliant with the Orange brand.**
 
 ```html
-<div class="container-xs">100% wide until extra breakpoint</div>
+<div class="container-xs">100% wide until extra small breakpoint</div>
 <div class="container-sm">100% wide until small breakpoint</div>
 <div class="container-md">100% wide until medium breakpoint</div>
 <div class="container-lg">100% wide until large breakpoint</div>
@@ -78,11 +78,11 @@ Use `.container-fluid` for a full width container with minimum margins, spanning
 </div>
 ```
 
-This container is the default one to use, associated with the class:
+This container is the default one to use, associated or not with one of the following class:
 - `.max-width-public-website` to be used for public websites. After breakpoint `2xl`, this class:
   - limits the container width to 1680px (including margins),
   - limits container margin to 80px each side,
-  - limits gutter widths to 32px.
+  - limits gutters width to 32px.
 - `.max-width-specific-tools` to be used for specific tools which need more horizontal space. After breakpoint `3xl`, this class:
   - limits the container width to 1920px (including margins).
 
@@ -96,8 +96,8 @@ Comparison between `.container-fluid`, `.container-fluid` width `.max-width-publ
 |  | X-Large<div class="fw-normal">&ge;1320px</div> | 2X-Large<div class="fw-normal">&ge;1640px</div> | 3X-Large<div class="fw-normal">&ge;1880px</div> |
 | --- | --- | --- | --- | --- |
 | `.container-fluid` | <ul><li>Width `100vw - (2 * 56px)`</li><li>Margin `2 * 56px`</li><li>Gutter `32px`</li></ul> | <ul><li>Width `100vw - (2 * 80px)`</li><li>Margin `2 * 80px`</li><li>Gutter `32px`</li></ul> | <ul><li>Width `100vw - (2 * 112px)`</li><li>Margin `2 * 112px`</li><li>Gutter `40px`</li></ul> |
-| `.container-fluid`<br>width `.max-width-public-website` | <ul><li>Width `100vw - (2 * 56px)`</li><li>Margin `2 * 56px`</li><li>Gutter `32px`</li></ul> | <ul><li>Width `100vw - (2 * 80px)`</li><li><b>Max-width `1520px`</b></li><li>Margin `2 * 80px`</li><li>Gutter `32px`</li></ul> | <ul><li><b>Width `1520px`</b></li><li><b>Margin `2 * 80px`</b></li><li><b>Gutter `32px`</b></li></ul> |
-| `.container-fluid`<br>width `.max-width-specific-tools` | <ul><li>Width `100vw - (2 * 56px)`</li><li>Margin `2 * 56px`</li><li>Gutter `32px`</li></ul> | <ul><li>Width `100vw - (2 * 80px)`</li><li>Margin `2 * 80px`</li><li>Gutter `32px`</li></ul> | <ul><li>Width `100vw - (2 * 112px)`</li><li><b>Max-width `1696px`</b></li><li>Margin `2 * 112px`</li><li>Gutter `40px`</li></ul> |
+| `.container-fluid`<br>with `.max-width-public-website` | <ul><li>Width `100vw - (2 * 56px)`</li><li>Margin `2 * 56px`</li><li>Gutter `32px`</li></ul> | <ul><li>Width `100vw - (2 * 80px)`</li><li><b>Max-width `1520px`</b></li><li>Margin `2 * 80px`</li><li>Gutter `32px`</li></ul> | <ul><li><b>Width `1520px`</b></li><li><b>Margin `2 * 80px`</b></li><li><b>Gutter `32px`</b></li></ul> |
+| `.container-fluid`<br>with `.max-width-specific-tools` | <ul><li>Width `100vw - (2 * 56px)`</li><li>Margin `2 * 56px`</li><li>Gutter `32px`</li></ul> | <ul><li>Width `100vw - (2 * 80px)`</li><li>Margin `2 * 80px`</li><li>Gutter `32px`</li></ul> | <ul><li>Width `100vw - (2 * 112px)`</li><li><b>Max-width `1696px`</b></li><li>Margin `2 * 112px`</li><li>Gutter `40px`</li></ul> |
 {{< /bs-table >}}
 
 ## CSS

site/content/docs/0.0/layout/grid.md

@@ -146,7 +146,8 @@ As noted above, each of these breakpoints have their own container, unique class
       </tr>
       <tr>
         <th class="text-nowrap" scope="row">Gutter width</th>
-        <td colspan="3">8px (4px on left and right)</td>
+        <td>8px (4px on left and right)</td>
+        <td colspan="2">16px (8px on left and right)</td>
         <td colspan="2">24px (12px on left and right)</td>
         <td colspan="2">32px (16px on left and right)</td>
         <td colspan="1">40px (20px on left and right)</td>
@@ -449,6 +450,7 @@ Variables and maps determine the number of columns, the gutter width, and the me
 
 ```scss
 $grid-columns:      12;
+$grid-gutter-width: 1.25rem;
 $grid-row-columns:  6;
 ```
 
@@ -535,7 +537,7 @@ The number of grid columns can be modified via Sass variables. `$grid-columns` i
 
 ```scss
 $grid-columns: 12 !default;
-$grid-gutter-width: 24px !default;
+$grid-gutter-width: 1.25rem !default;
 $grid-row-columns: 6 !default;
 ```