use mixin for variables

app/assets/stylesheets/admin/pure.sass

 @import 'pure/utils'
 @import 'pure/fonts'
 @import 'pure/variables'
+@import 'pure/mixins'
 @import 'pure/grid'
 @import 'bootstrap'
 @import 'bootstrap-icons/font/bootstrap-icons'

app/assets/stylesheets/admin/pure/grid.sass

 *
-    --bs-gutter-x: 64px !important
+    @include root-prop(--bs-gutter-x, 64px !important)
     @media (max-width: 768px)
-        --bs-gutter-x: 32px !important
+        @include root-prop(--bs-gutter-x, 32px !important)

app/assets/stylesheets/admin/pure/mixins.sass

+@mixin root-prop($prop: null, $value: null)
+    @if ($prop and $value)
+        #{$prop}: $value

app/assets/stylesheets/extranet/layout/_default.sass

 .container
     @include media-breakpoint-up(md)
-        padding-right: var(--bs-gutter-x)
         padding-left: var(--bs-gutter-x)
+        padding-right: var(--bs-gutter-x)
 
 .action-show
     dl
@@ -11,11 +11,11 @@
         dd
             margin-bottom: px2rem(26)
         a
-            transition: text-decoration 0.5s
             text-decoration: underline
+            text-decoration-color: adjust-color(black, $alpha: -0.8)
             text-decoration-thickness: 1px
             text-underline-offset: 4px
-            text-decoration-color: adjust-color(black, $alpha: -0.8)
+            transition: text-decoration 0.5s
             &:hover
                 text-decoration-color: black