Fix timeline

assets/sass/_theme/blocks/timeline.sass

@@ -11,7 +11,7 @@
                 border-radius: 50%
                 content: ""
                 height: 9px
-                left: half(var(--grid-gutter-negative))
+                left: -$spacing-3
                 margin-top: 0.5em
                 position: absolute
                 width: 9px
@@ -20,7 +20,7 @@
                 background: $color-text
                 bottom: -0.5em
                 content: ""
-                left: half(var(--grid-gutter-negative))
+                left: -$spacing-3
                 position: absolute
                 top: 0.5em
                 width: 1px
@@ -35,7 +35,7 @@
 
         @include media-breakpoint-down(desktop)
             .timeline-event
-                padding-left: half(var(--grid-gutter))
+                padding-left: $spacing-3
                 &::after, &::before
                     left: 0
 
@@ -46,7 +46,7 @@
                 display: flex
                 &::before, &::after
                     left: columns(3)
-                    margin-left: half(var(--grid-gutter))
+                    margin-left: calc(var(--grid-gutter) / 2)
                 &::before
                     transform: translateX(-4px)
                 .title
@@ -77,7 +77,7 @@
             
         .timeline-arrows
             display: flex
-            padding-left: half(var(--grid-gutter))
+            padding-left: calc(var(--grid-gutter) / 2)
             > button
                 @include button-reset
                 background: none
@@ -93,8 +93,8 @@
                     cursor: default
                     opacity: 0.3
         .timeline-events
-            margin-left: half(var(--grid-gutter-negative))
-            margin-right: half(var(--grid-gutter-negative))
+            margin-left: calc(var(--grid-gutter-negative) / 2)
+            margin-right: calc(var(--grid-gutter-negative) / 2)
             // TODO : fixer le px gap en desktop entre chaque event
             ol
                 display: flex
@@ -106,7 +106,7 @@
                 width: 100%
         .timeline-event
             flex: none
-            padding: 0 half(var(--grid-gutter))
+            padding: 0 calc(var(--grid-gutter) / 2)
             scroll-snap-align: start
             transition: 0.3s opacity
             width: 50%
@@ -123,13 +123,14 @@
                 margin-bottom: $spacing-3
                 opacity: 1
                 overflow: visible
-                width: calc(100% + #{half(var(--grid-gutter))})
+                width: calc(100% + #{var(--grid-gutter) / 2})
                 &::before
                     background: $block-timeline-horizontal-color
                     border-radius: 50%
                     content: ""
                     display: block
                     height: 9px
+                    margin-left: -4px
                     position: relative
                     top: -4px
                     width: 9px