common/static/common/styles/_activity.sass

@@ -16,7 +16,7 @@
     &:last-child
       /* Remove bottom half of the vertical line for last item. */
       .comment-card:before
-        height: calc(50% - 1.6rem)
+        height: calc(50% - var(--spacer))
       .activity-status-change:before
         height: calc(50% + var(--border-width))
 
@@ -50,7 +50,7 @@
       left: var(--border-width)
       position: absolute
       top: 50%
-      width: 3.2rem
+      width: calc(var(--spacer) * 2)
       z-index: -1
 
     .activity-icon
@@ -87,7 +87,7 @@
     &.activity-status-approved
       .activity-icon
         border-color: var(--color-success)
-        box-shadow: 0 0 1.6rem var(--color-success-bg)
+        box-shadow: 0 0 var(--spacer) var(--color-success-bg)
         color: var(--color-success-text)
 
 .activity-icon

common/static/common/styles/_comments.sass

@@ -15,12 +15,12 @@
       border-radius: .4rem
       content: ''
       display: block
-      height: 1.6rem
+      height: var(--spacer)
       left: -.33rem
       position: absolute
       rotate: 45deg
-      top: 1.6rem
+      top: var(--spacer)
-      width: 1.6rem
+      width: var(--spacer)
       z-index: -1
 
     p:last-child
@@ -35,7 +35,7 @@
       align-items: center
       display: flex
       +list-unstyled
-      gap: 1.6rem
+      gap: var(--spacer)
       margin: 0
 
       li

common/static/common/styles/_galleria.sass

@@ -12,7 +12,7 @@
 
 .galleria-items
   display: flex
-  gap: .8rem
+  gap: var(--spacer-2)
   overflow-x: auto
   +padding(2, top)
   scroll-behavior: smooth
@@ -43,7 +43,7 @@
 
   .galleria-item-type-video
     &::after
-      font-size: 3.2rem
+      font-size: calc(var(--spacer) * 2)
 
 .galleria-item
   +border-radius
@@ -69,7 +69,7 @@
       transform: translate(-50%, -50%)
       width: initial
       height: initial
-      gap: 1.6rem
+      gap: var(--spacer)
 
 
   &.is-active
@@ -174,7 +174,7 @@
 
   .indicator
     background-color: rgba(black, .5)
-    bottom: 1.6rem
+    bottom: var(--spacer)
     color: white
     +fw-bold
     min-width: 3ch
@@ -187,7 +187,7 @@
     backdrop-filter: blur(2.8rem)
     background-color: rgba(black, .5)
     border-radius: var(--border-radius)
-    bottom: 1.6rem
+    bottom: var(--spacer)
     color: white
     +font-weight(500)
     line-height: 1.5

common/static/common/styles/main.sass

@@ -75,7 +75,7 @@ $container-width: map-get($container-max-widths, 'xl')
   font-size: var(--fs-xs)
   justify-content: center
   padding-block: .1rem
-  padding-inline: .4rem
+  padding-inline: var(--spacer-1)
   position: absolute
   top: calc(var(--spacer-2) * -1)
   transition: background-color var(--transition-speed), box-shadow 500ms, color var(--transition-speed)