grid in rem

assets/sass/_theme/_configuration.sass

@@ -74,9 +74,9 @@ $spacing5: px2rem(256) !default
 // TODO: choisir entre margin top / bottom --> https://matthewjamestaylor.com/css-margin-top-vs-bottom
 
 // Grid
-$grid-gutter: 64px !default
-$grid-max-width: 1980px !default
-$grid-gutter-sm: 40px !default
+$grid-gutter: px2rem(64) !default
+$grid-max-width: px2rem(1980) !default
+$grid-gutter-sm: px2rem(40) !default
 
 // Z-index
 $zindex-nav-accessibility: 1010 !default

assets/sass/_theme/_utils.sass

@@ -68,8 +68,8 @@
     margin-left: auto
     margin-right: auto
     max-width: $grid-max-width
-    padding-left: $grid-gutter-sm / 2
-    padding-right: $grid-gutter-sm / 2
+    padding-left: calc(#{$grid-gutter-sm} / 2)
+    padding-right: calc(#{$grid-gutter-sm} / 2)
     width: 100%
     @include media-breakpoint-up(md)
         padding-left: $grid-gutter

assets/sass/_theme/blocks/timeline.sass

 .block-timeline--vertical
     .events
-        padding-left: $grid-gutter/2
+        padding-left: calc(#{$grid-gutter} / 2)
         position: relative
         &::before
             background: $main-color
@@ -58,7 +58,7 @@
             color: $block-timeline-horizontal-color
             cursor: pointer
             font-size: 1rem
-            padding: $grid-gutter / 2
+            padding: calc(#{$grid-gutter} / 2)
             &:first-child
                 @include icon("arrow-left", before)
             &:last-child
@@ -67,8 +67,8 @@
                 cursor: default
                 opacity: 0.3
     .events
-        margin-left: $grid-gutter / -2
-        margin-right: $grid-gutter / -2
+        margin-left: calc(#{$grid-gutter} / -2)
+        margin-right: calc(#{$grid-gutter} / -2)
         // TODO : fixer le px gap en desktop entre chaque event
         ol
             display: flex
@@ -79,7 +79,7 @@
             width: 100%
     .event
         flex: none
-        padding: 0 $grid-gutter / 2
+        padding: 0 calc(#{$grid-gutter} / 2)
         scroll-snap-align: start
         transition: 0.3s opacity
         width: 50%

assets/sass/_theme/design-system/pagination.sass

@@ -2,7 +2,7 @@
     // font-family: $font-family-sans-serif
     font-size: px2rem(14)
     justify-content: center
-    margin: calc($grid-gutter * 2.5) 0 0
+    margin: calc(#{$grid-gutter} * 2.5) 0 0
     li
         @include list-reset
         // @extend .page-item