diff --git a/stylesheets/_avatar.scss b/stylesheets/_avatar.scss
index 81ac8b565..25ab0649e 100644
--- a/stylesheets/_avatar.scss
+++ b/stylesheets/_avatar.scss
@@ -91,7 +91,7 @@ $borderAvatarColor: unquote(
 }
 
 .module-avatar-clickable {
-  transition: $session-transition-duration;
+  transition: var(--default-duration);
   cursor: pointer;
   &:hover {
     filter: grayscale(0.7);
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 32879b7fe..a56a4e1b3 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -67,7 +67,7 @@
 
       filter: brightness(1.05);
       svg path {
-        transition: $session-transition-duration;
+        transition: var(--default-duration);
         opacity: 0.6;
         fill: var(--color-text-opposite);
       }
diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss
index 94eeff6fb..41ad17326 100644
--- a/stylesheets/_modal.scss
+++ b/stylesheets/_modal.scss
@@ -162,7 +162,7 @@
 
 .edit-profile-dialog {
   .session-modal__header__title {
-    font-size: $session-font-lg;
+    font-size: var(--font-size-lg);
   }
 
   .session-modal {
@@ -191,7 +191,7 @@
       width: 30px;
       border-radius: 50%;
       background-color: $session-color-white;
-      transition: $session-transition-duration;
+      transition: var(--default-duration);
 
       &:hover {
         filter: brightness(90%);
@@ -216,7 +216,7 @@
   .profile-name {
     display: flex;
     justify-content: center;
-    margin-top: $session-margin-lg;
+    margin-top: var(--margins-lg);
 
     input {
       height: 38px;
@@ -235,7 +235,7 @@
 
       p {
         font-size: $session-font-md;
-        padding: 0px $session-margin-sm;
+        padding: 0px var(--margins-sm);
       }
 
       .session-icon-button {
@@ -247,7 +247,7 @@
 
 .onion-status-dialog {
   .session-modal__header__title {
-    font-size: $session-font-lg;
+    font-size: var(--font-size-lg);
   }
 
   .session-modal {
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 7beab63ca..c747f792d 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -231,8 +231,8 @@
 }
 .module-conversation__user,
 .module-message__author {
-  margin-top: $session-margin-sm;
-  margin-bottom: $session-margin-xs;
+  margin-top: var(--margins-sm);
+  margin-bottom: var(--margins-xs);
   font-size: var(--font-size-sm);
   font-weight: 300;
   line-height: 18px;
@@ -675,7 +675,7 @@
   overflow: hidden;
 
   .session-icon-button:first-child {
-    margin-right: $session-margin-sm;
+    margin-right: var(--margins-sm);
   }
 }
 
@@ -1214,7 +1214,7 @@
   align-items: flex-start;
 
   min-height: 65px;
-  margin: $session-margin-xs;
+  margin: var(--margins-xs);
 }
 
 .module-staged-link-preview--is-loading {
@@ -1232,11 +1232,11 @@
 
 .module-staged-link-preview__icon-container {
   margin-inline-end: 8px;
-  padding: $session-margin-sm;
+  padding: var(--margins-sm);
 }
 .module-staged-link-preview__content {
   margin-inline-end: 20px;
-  padding: $session-margin-sm;
+  padding: var(--margins-sm);
 }
 .module-staged-link-preview__title {
   color: $color-gray-90;
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index ba20054c4..b7e76c228 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -92,7 +92,7 @@ textarea {
   user-select: none;
   white-space: nowrap;
   cursor: pointer;
-  transition: $session-transition-duration;
+  transition: var(--default-duration);
   background-color: rgba(0, 0, 0, 0);
 
   &.disabled {
@@ -196,7 +196,7 @@ textarea {
     min-width: 165px;
     height: 45px;
     align-items: center;
-    padding: 0px $session-margin-lg;
+    padding: 0px var(--margins-lg);
     font-size: $session-font-md;
     font-family: $session-font-accent;
     border-radius: 500px;
@@ -229,7 +229,7 @@ textarea {
 
 .session-label {
   color: $session-color-white;
-  padding: $session-margin-sm;
+  padding: var(--margins-sm);
   width: 100%;
   border-radius: 2px;
   text-align: center;
@@ -260,7 +260,7 @@ textarea {
   &:hover {
     opacity: 1;
   }
-  transition: opacity $session-transition-duration;
+  transition: opacity var(--default-duration);
 
   &.no-opacity {
     opacity: 1;
@@ -324,7 +324,7 @@ textarea {
 
 pre {
   backdrop-filter: brightness(0.8);
-  padding: $session-margin-xs;
+  padding: var(--margins-xs);
 }
 
 .module-message__container {
@@ -371,7 +371,7 @@ label {
 
 .module-conversation-header {
   position: relative;
-  padding: 0px $session-margin-lg 0px $session-margin-sm;
+  padding: 0px var(--margins-lg) 0px var(--margins-sm);
 }
 
 .title-wrapper {
@@ -416,7 +416,7 @@ label {
 }
 
 .session-modal {
-  animation: fadein $session-transition-duration;
+  animation: fadein var(--default-duration);
   z-index: 150;
   min-width: 300px;
   box-sizing: border-box;
@@ -438,7 +438,7 @@ label {
     justify-content: space-between;
     align-items: center;
 
-    padding: $session-margin-lg;
+    padding: var(--margins-lg);
 
     font-family: $session-font-default;
     text-align: center;
@@ -469,7 +469,7 @@ label {
     }
     &__close > div {
       float: left;
-      padding: $session-margin-xs;
+      padding: var(--margins-xs);
       margin: 0px;
     }
     &__icons > div {
@@ -479,7 +479,7 @@ label {
   }
 
   &__body {
-    padding: 0px $session-margin-lg $session-margin-lg $session-margin-lg;
+    padding: 0px var(--margins-lg) var(--margins-lg) var(--margins-lg);
     font-family: $session-font-default;
     line-height: $session-font-md;
     font-size: $session-font-md;
@@ -514,7 +514,7 @@ label {
     justify-content: flex-end;
 
     .session-button {
-      margin: $session-margin-xs;
+      margin: var(--margins-xs);
     }
 
     &__center {
@@ -522,7 +522,7 @@ label {
       justify-content: center;
 
       .session-button {
-        margin: $session-margin-xs;
+        margin: var(--margins-xs);
       }
     }
   }
@@ -546,7 +546,7 @@ label {
 .session-confirm {
   &-wrapper {
     .session-modal__body .session-modal__centered {
-      margin: $session-margin-lg;
+      margin: var(--margins-lg);
       text-align: center;
     }
   }
@@ -583,8 +583,8 @@ label {
     box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.05), 0 3px 1px 0 rgba(0, 0, 0, 0.05),
       0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
 
-    transition: transform $session-transition-duration ease,
-      background-color $session-transition-duration ease;
+    transition: transform var(--default-duration) ease,
+      background-color var(--default-duration) ease;
   }
 
   &.active {
@@ -614,7 +614,7 @@ label {
     color: var(--color-text-menu-highlighted);
   }
   .react-contexify__item__content {
-    transition: $session-transition-duration;
+    transition: var(--default-duration);
     color: var(--color-text);
   }
 
@@ -637,7 +637,7 @@ label {
     align-items: center;
     justify-content: space-between;
     height: 50px;
-    padding: 0px $session-margin-md;
+    padding: 0px var(--margins-md);
     font-size: $session-font-sm;
 
     color: var(--color-text);
@@ -668,13 +668,13 @@ label {
     align-items: center;
     justify-content: center;
     height: 35px;
-    padding: 0 $session-margin-md;
+    padding: 0 var(--margins-md);
     background: var(--color-cell-background);
     color: var(--color-text);
 
     font-size: 0.8rem;
     width: -webkit-fill-available;
-    transition: $session-transition-duration;
+    transition: var(--default-duration);
 
     &:first-child {
       border-top: var(--border-session);
@@ -724,7 +724,7 @@ label {
   border-radius: 100%;
   background-color: rgba($session-color-black, 0.72);
   opacity: 0;
-  transition: $session-transition-duration;
+  transition: var(--default-duration);
 
   &:after {
     content: 'Edit';
@@ -745,7 +745,7 @@ label {
     width: 135px;
     height: 135px;
     border-radius: 3px;
-    padding: $session-margin-xs;
+    padding: var(--margins-xs);
     background-color: $session-color-white;
   }
 }
@@ -841,20 +841,20 @@ label {
     &-title {
       line-height: $main-view-header-height;
       font-weight: bold;
-      font-size: $session-font-lg;
+      font-size: var(--font-size-lg);
       text-align: center;
       flex-grow: 1;
     }
 
     .session-button,
     .session-icon-button {
-      margin-inline-end: $session-margin-lg;
+      margin-inline-end: var(--margins-lg);
     }
   }
 
   &-item {
     font-size: $session-font-md;
-    padding: $session-margin-lg;
+    padding: var(--margins-lg);
     margin-bottom: 20px;
 
     background: var(--color-cell-background);
@@ -868,12 +868,12 @@ label {
     }
 
     &__info {
-      padding-inline-end: $session-margin-lg;
+      padding-inline-end: var(--margins-lg);
     }
 
     &__title {
       line-height: 1.7;
-      font-size: $session-font-lg;
+      font-size: var(--font-size-lg);
       font-weight: bold;
     }
 
@@ -887,7 +887,7 @@ label {
 
     &__selection {
       .session-toggle {
-        transition: $session-transition-duration;
+        transition: var(--default-duration);
       }
     }
   }
@@ -904,13 +904,13 @@ label {
     display: flex;
     justify-content: space-between;
 
-    padding: $session-margin-sm $session-margin-md;
+    padding: var(--margins-sm) var(--margins-md);
     background: none;
     font-size: $session-font-xs;
 
     span {
       opacity: 0.4;
-      transition: $session-transition-duration;
+      transition: var(--default-duration);
 
       &:hover {
         opacity: 1;
@@ -941,7 +941,7 @@ label {
 
       h3 {
         padding: 0px;
-        margin-bottom: $session-margin-lg;
+        margin-bottom: var(--margins-lg);
       }
 
       input {
@@ -949,13 +949,13 @@ label {
         background: var(--color-input-background);
         color: var(--color-text);
 
-        padding: $session-margin-xs $session-margin-md;
-        margin-bottom: $session-margin-lg;
+        padding: var(--margins-xs) var(--margins-md);
+        margin-bottom: var(--margins-lg);
         outline: none;
         border: none;
         border-radius: 2px;
         text-align: center;
-        font-size: $session-font-xl;
+        font-size: 24px;
         letter-spacing: 5px;
         font-family: $session-font-default;
       }
@@ -967,17 +967,17 @@ label {
 .qr-image svg {
   width: $session-modal-size-sm;
   height: $session-modal-size-sm;
-  padding: $session-margin-xs;
+  padding: var(--margins-xs);
   background-color: $session-color-white;
   border-radius: 3px;
 }
 
 .messages li {
-  transition: $session-transition-duration !important;
+  transition: var(--default-duration) !important;
 }
 
 .session-id-editable {
-  padding: $session-margin-lg;
+  padding: var(--margins-lg);
 
   textarea {
     width: 30vh;
@@ -1028,7 +1028,7 @@ input {
 .onion__node-list {
   display: flex;
   flex-direction: column;
-  margin: $session-margin-sm;
+  margin: var(--margins-sm);
   align-items: center;
   min-width: 10vw;
   position: relative;
@@ -1037,7 +1037,7 @@ input {
     display: flex;
     flex-grow: 1;
     align-items: center;
-    margin: $session-margin-xs;
+    margin: var(--margins-xs);
 
     &:nth-child(2) {
       margin-top: 0;
@@ -1048,7 +1048,7 @@ input {
     }
 
     .session-icon-button {
-      margin: $session-margin-sm !important;
+      margin: var(--margins-sm) !important;
     }
   }
 
@@ -1056,7 +1056,7 @@ input {
     position: relative;
   }
   .onion__node__country {
-    margin: $session-margin-sm;
+    margin: var(--margins-sm);
     min-width: 150px;
   }
 
@@ -1089,7 +1089,7 @@ input {
     box-shadow: var(--color-session-shadow);
 
     svg path {
-      transition: $session-transition-duration;
+      transition: var(--default-duration);
       opacity: 0.6;
       fill: var(--color-text);
     }
diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss
index c73021af0..f45bf3803 100644
--- a/stylesheets/_session_constants.scss
+++ b/stylesheets/_session_constants.scss
@@ -71,10 +71,6 @@ $session-shade-16: #979797;
 $session-shade-17: #a0a0a0;
 $session-shade-18: #141414;
 
-$session-opaque-dark-1: rgba(0, 0, 0, 0.25);
-$session-opaque-dark-2: rgba(0, 0, 0, 0.37);
-$session-opaque-dark-3: rgba(0, 0, 0, 0.5);
-
 $session-color-white: #fff;
 $session-color-light-grey: #a0a0a0;
 $session-color-dark-grey: #353535;
@@ -103,13 +99,8 @@ $session-overlay-opacity: 0.3;
 $session-font-xs: 11px;
 $session-font-sm: 13px;
 $session-font-md: 15px;
-$session-font-lg: 18px;
-$session-font-xl: 24px;
 
-$session-font-h1: 30px;
 $session-font-h2: 24px;
-$session-font-h3: 20px;
-$session-font-h4: 16px;
 
 // Mixins
 @mixin fontAccentBold {
diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss
index 693505670..fe997a2cf 100644
--- a/stylesheets/_session_conversation.scss
+++ b/stylesheets/_session_conversation.scss
@@ -64,7 +64,7 @@
     display: flex;
     left: 0px;
     right: 0px;
-    padding: 0px $session-margin-md;
+    padding: 0px var(--margins-md);
     align-items: center;
     justify-content: space-between;
     height: $main-view-header-height;
@@ -96,7 +96,7 @@
 
   .selection-mode {
     .messages-container > *:not(.message-selected) {
-      animation: toShadow $session-transition-duration;
+      animation: toShadow var(--default-duration);
       opacity: 0.4;
     }
   }
@@ -150,21 +150,21 @@
   overflow-x: hidden;
   min-width: 370px;
   scrollbar-width: 4px;
-  padding: $session-margin-sm $session-margin-lg $session-margin-lg;
+  padding: var(--margins-sm) var(--margins-lg) var(--margins-lg);
 }
 
 .composition-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 0px $session-margin-md;
+  padding: 0px var(--margins-md);
   min-height: min-content;
   background: var(--color-cell-background);
   border-top: var(--border-session);
   z-index: 1;
 
   .session-icon-button {
-    margin-right: $session-margin-sm;
+    margin-right: var(--margins-sm);
 
     display: flex;
     justify-content: center;
@@ -174,11 +174,11 @@
     &:hover {
       opacity: 1;
       filter: brightness(0.9);
-      transition: $session-transition-duration;
+      transition: var(--default-duration);
     }
 
     .send {
-      padding: $session-margin-xs;
+      padding: var(--margins-xs);
       border-radius: 50%;
       height: 30px;
       width: 30px;
@@ -191,7 +191,7 @@
     align-items: center;
     flex-grow: 1;
     min-height: $composition-container-height;
-    padding: $session-margin-xs 0;
+    padding: var(--margins-xs) 0;
     z-index: 1;
     background-color: inherit;
 
@@ -204,7 +204,7 @@
       font-family: $session-font-default;
       min-height: calc($composition-container-height / 3);
       max-height: 3 * $composition-container-height;
-      margin-right: $session-margin-md;
+      margin-right: var(--margins-md);
       color: var(--color-text);
 
       background: transparent;
@@ -235,12 +235,12 @@
   position: absolute;
   bottom: 68px;
   right: 0px;
-  padding: $session-margin-lg;
+  padding: var(--margins-lg);
 
   z-index: 5;
   opacity: 0;
   visibility: hidden;
-  transition: $session-transition-duration;
+  transition: var(--default-duration);
 
   button:focus {
     outline: none;
@@ -257,14 +257,14 @@
     background-color: var(--color-cell-background);
     border: 1px solid var(--color-session-border);
     border-radius: 8px;
-    padding-bottom: $session-margin-sm;
+    padding-bottom: var(--margins-sm);
 
     .emoji-mart-category-label {
       top: -2px;
 
       span {
         font-family: $session-font-default;
-        padding-top: $session-margin-sm;
+        padding-top: var(--margins-sm);
         background-color: var(--color-cell-background);
       }
     }
@@ -324,7 +324,7 @@
 }
 
 .send-message-button {
-  animation: fadein $session-transition-duration;
+  animation: fadein var(--default-duration);
 
   &---scale {
     animation: scaling 2s ease-in-out;
@@ -363,11 +363,11 @@
     border-radius: 50%;
 
     .session-button {
-      animation: fadein $session-transition-duration;
+      animation: fadein var(--default-duration);
     }
 
     .session-icon-button {
-      animation: fadein $session-transition-duration;
+      animation: fadein var(--default-duration);
       border-radius: 50%;
       width: $actions-element-size;
       height: $actions-element-size;
@@ -389,7 +389,7 @@
     canvas {
       position: absolute;
       width: 100%;
-      padding: 0px $session-margin-lg;
+      padding: 0px var(--margins-lg);
     }
   }
 
@@ -400,7 +400,7 @@
     left: 0;
     z-index: 2;
     right: 0;
-    bottom: $composition-container-height + $session-margin-md;
+    bottom: $composition-container-height + var(--margins-md);
 
     .session-button {
       display: flex;
@@ -434,7 +434,7 @@
     flex-shrink: 0;
 
     &.playback-timer {
-      animation: fadein $session-transition-duration;
+      animation: fadein var(--default-duration);
 
       @media (-webkit-min-device-pixel-ratio: 1.6) {
         margin-left: auto;
@@ -442,11 +442,11 @@
     }
 
     &-light {
-      height: $session-margin-sm;
-      width: $session-margin-sm;
+      height: var(--margins-sm);
+      width: var(--margins-sm);
       border-radius: 50%;
       background-color: $session-color-danger-alt;
-      margin: 0 $session-margin-sm;
+      margin: 0 var(--margins-sm);
 
       @include pulse-color($session-color-danger-alt, 1s, infinite);
     }
@@ -477,7 +477,7 @@ $rhap_font-family: inherit !default;
   box-shadow: none;
 
   svg {
-    transition: fill $session-transition-duration;
+    transition: fill var(--default-duration);
 
     &:hover path {
       fill: #ffffff;
diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss
index 548dfde4d..215b89b28 100644
--- a/stylesheets/_session_group_panel.scss
+++ b/stylesheets/_session_group_panel.scss
@@ -10,8 +10,8 @@
 
   &-header {
     margin-top: var(--margins-lg);
-    margin-inline-start: $session-margin-sm;
-    margin-inline-end: $session-margin-sm;
+    margin-inline-start: var(--margins-sm);
+    margin-inline-end: var(--margins-sm);
     width: -webkit-fill-available;
     display: flex;
     flex-direction: row;
@@ -27,7 +27,7 @@
   }
 
   .description {
-    margin: $session-margin-md 0;
+    margin: var(--margins-md) 0;
     min-height: 4rem;
     width: inherit;
     color: var(--color-text);
@@ -49,8 +49,8 @@
     border-bottom: var(--border-session);
 
     width: -webkit-fill-available;
-    padding: 0 $session-margin-md;
-    transition: $session-transition-duration;
+    padding: 0 var(--margins-md);
+    transition: var(--default-duration);
     cursor: pointer;
 
     &:hover {
@@ -121,7 +121,7 @@
       }
 
       &__content {
-        padding: $session-margin-xs;
+        padding: var(--margins-xs);
         margin-bottom: 1vh;
 
         .module-media-grid-item__image,
diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss
index c8a0ba1bf..b2d91aa3a 100644
--- a/stylesheets/_session_left_pane.scss
+++ b/stylesheets/_session_left_pane.scss
@@ -13,7 +13,7 @@ $session-compose-margin: 20px;
   }
 
   &-list-item {
-    transition: $session-transition-duration;
+    transition: var(--default-duration);
 
     &:hover {
       background: var(--color-clickable-hovered);
@@ -88,13 +88,13 @@ $session-compose-margin: 20px;
     align-items: center;
     height: $main-view-header-height;
     padding-inline-end: 7px;
-    transition: $session-transition-duration;
+    transition: var(--default-duration);
   }
 
   &__title {
-    padding-inline-end: $session-margin-sm;
-    padding-inline-start: $session-margin-sm;
-    transition: $session-transition-duration;
+    padding-inline-end: var(--margins-sm);
+    padding-inline-start: var(--margins-sm);
+    transition: var(--default-duration);
     flex-grow: 1;
   }
 
diff --git a/stylesheets/_session_password.scss b/stylesheets/_session_password.scss
index 4236bcdc4..99bd3d1de 100644
--- a/stylesheets/_session_password.scss
+++ b/stylesheets/_session_password.scss
@@ -33,13 +33,13 @@
     &-error-section {
       width: 100%;
       color: $session-color-white;
-      margin: -$session-margin-sm 0px 2 * $session-margin-lg 0px;
+      margin: -var(--margins-sm) 0px 2 * $session-margin-lg 0px;
 
       .session-label {
         &.primary {
           background-color: rgba($session-color-primary, 0.3);
         }
-        padding: $session-margin-xs $session-margin-sm;
+        padding: var(--margins-xs) var(--margins-sm);
         text-align: center;
       }
     }
@@ -70,13 +70,13 @@
           color: $session-color-white;
         }
         svg {
-          margin-inline-end: $session-margin-lg;
+          margin-inline-end: var(--margins-lg);
         }
       }
 
       p,
       input {
-        margin: $session-margin-lg 0px;
+        margin: var(--margins-lg) 0px;
       }
 
       .button-group {
@@ -88,7 +88,7 @@
         color: #fff;
         background-color: #2e2e2e;
         margin-top: 2 * $session-margin-lg;
-        padding: $session-margin-xs $session-margin-lg;
+        padding: var(--margins-xs) var(--margins-lg);
         outline: none;
         border: none;
         border-radius: 2px;
diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss
index 8343f2f4b..730e03c64 100644
--- a/stylesheets/_session_signin.scss
+++ b/stylesheets/_session_signin.scss
@@ -95,7 +95,7 @@
     color: var(--color-text);
 
     padding: 2px 0 2px 0;
-    transition: opacity $session-transition-duration;
+    transition: opacity var(--default-duration);
     opacity: 1;
     position: relative;
 
@@ -151,7 +151,7 @@
   }
 
   &-terms-conditions-agreement {
-    padding-top: $session-margin-md;
+    padding-top: var(--margins-md);
 
     color: var(--color-text-subtle);
     text-align: center;
@@ -163,7 +163,7 @@
       text-decoration: none;
 
       color: var(--color-text-subtle);
-      transition: $session-transition-duration;
+      transition: var(--default-duration);
 
       &:visited &:link {
         color: var(--color-text-subtle);
diff --git a/stylesheets/_session_slider.scss b/stylesheets/_session_slider.scss
index 16874e28e..06aa7230f 100644
--- a/stylesheets/_session_slider.scss
+++ b/stylesheets/_session_slider.scss
@@ -41,7 +41,7 @@
   margin: 0px 0px 0px -1px;
 }
 .rc-slider-handle {
-  transition: $session-transition-duration;
+  transition: var(--default-duration);
   position: absolute;
   width: 6px;
   height: 25px;
diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss
index 47fda61fb..1bd7f7d25 100644
--- a/stylesheets/_session_theme.scss
+++ b/stylesheets/_session_theme.scss
@@ -60,7 +60,7 @@
       align-items: center;
 
       svg {
-        margin-right: $session-margin-xs;
+        margin-right: var(--margins-xs);
       }
 
       a {