diff --git a/sass/features/_top.scss b/sass/features/_top.scss
index 8d16d41a..7a1caee3 100644
--- a/sass/features/_top.scss
+++ b/sass/features/_top.scss
@@ -4,7 +4,7 @@
   --color-background-top-hover: #f0f0f0;
   background-color: var(--color-background-top);
   border-radius: 2px;
-  bottom: var(--padding-container-horizontal);
+  bottom: var(--spacing-container-padding-inline);
   color: var(--color-black);
   cursor: pointer;
   font-size: var(--typography-size-16);
@@ -13,7 +13,7 @@
   line-height: 30px;
   opacity: 0;
   position: fixed;
-  right: var(--padding-container-horizontal);
+  right: var(--spacing-container-padding-inline);
   text-align: center;
   text-decoration: none;
   transition: 500ms opacity;
diff --git a/sass/gutenberg/_editor.scss b/sass/gutenberg/_editor.scss
index 1fac1ba7..0a2fd8d0 100644
--- a/sass/gutenberg/_editor.scss
+++ b/sass/gutenberg/_editor.scss
@@ -81,8 +81,8 @@
   .wp-block-gallery,
   .wp-block.editor-post-title {
     @media (max-width: $width-max-article + 40px) {
-      padding-left: var(--padding-container-horizontal);
-      padding-right: var(--padding-container-horizontal);
+      padding-left: var(--spacing-container-padding-inline);
+      padding-right: var(--spacing-container-padding-inline);
       width: 100%;
 
       &.alignleft,
@@ -103,12 +103,12 @@
 
   // Full width gallery should be always be with paddings
   .wp-block[data-align="full"] > .wp-block-gallery {
-    padding-left: var(--padding-container-horizontal);
-    padding-right: var(--padding-container-horizontal);
+    padding-left: var(--spacing-container-padding-inline);
+    padding-right: var(--spacing-container-padding-inline);
 
     &.alignfull {
-      padding-left: var(--padding-container-horizontal);
-      padding-right: var(--padding-container-horizontal);
+      padding-left: var(--spacing-container-padding-inline);
+      padding-right: var(--spacing-container-padding-inline);
     }
   }
 
diff --git a/sass/gutenberg/blocks/_core-blockquote.scss b/sass/gutenberg/blocks/_core-blockquote.scss
index 643de241..3f97a525 100644
--- a/sass/gutenberg/blocks/_core-blockquote.scss
+++ b/sass/gutenberg/blocks/_core-blockquote.scss
@@ -43,7 +43,7 @@ blockquote {
 
   @media (max-width: $width-max-article + 40px) {
     padding: 3.5rem 2rem;
-    width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+    width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
 
   @media (max-width: $container-mobile) {
@@ -53,9 +53,9 @@ blockquote {
 
 .wp-block-blockquote.alignwide,
 .wp-block-blockquote.alignfull {
-  padding-left: var(--padding-container-horizontal);
-  padding-right: var(--padding-container-horizontal);
-  width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+  padding-left: var(--spacing-container-padding-inline);
+  padding-right: var(--spacing-container-padding-inline);
+  width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
 }
 
 .wp-block-blockquote blockquote {
diff --git a/sass/gutenberg/blocks/_core-columns.scss b/sass/gutenberg/blocks/_core-columns.scss
index cce3abdb..d3afbee1 100644
--- a/sass/gutenberg/blocks/_core-columns.scss
+++ b/sass/gutenberg/blocks/_core-columns.scss
@@ -14,8 +14,8 @@ h3 {
 
 @for $i from 1 through 9 {
   .wp-block-columns.has-#{$i}-columns.alignfull {
-    padding-left: var(--padding-container-horizontal);
-    padding-right: var(--padding-container-horizontal);
+    padding-left: var(--spacing-container-padding-inline);
+    padding-right: var(--spacing-container-padding-inline);
     width: 100%;
   }
 
diff --git a/sass/gutenberg/blocks/_core-image.scss b/sass/gutenberg/blocks/_core-image.scss
index eb4fedef..103ca574 100644
--- a/sass/gutenberg/blocks/_core-image.scss
+++ b/sass/gutenberg/blocks/_core-image.scss
@@ -1,8 +1,8 @@
 // Image block
 .wp-block-image {
   display: block;
-  margin-bottom: var(--margin-wp-block-image);
-  margin-top: var(--margin-wp-block-image);
+  margin-bottom: var(--spacing-wp-block-image-margin-block);
+  margin-top: var(--spacing-wp-block-image-margin-block);
 
   &.alignwide,
   &.alignfull {
@@ -48,7 +48,7 @@
 
   @media (max-width: $width-grid-base + 40px) {
     &.alignwide {
-      width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+      width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
     }
   }
 
diff --git a/sass/gutenberg/blocks/_core-list.scss b/sass/gutenberg/blocks/_core-list.scss
index 5c2cd6ec..9a4a5682 100644
--- a/sass/gutenberg/blocks/_core-list.scss
+++ b/sass/gutenberg/blocks/_core-list.scss
@@ -2,7 +2,7 @@
 ul,
 ol {
   list-style-position: outside;
-  width: calc((100% - calc(var(--padding-container-horizontal) * 2)));
+  width: calc((100% - calc(var(--spacing-container-padding-inline) * 2)));
 }
 
 ul {
diff --git a/sass/gutenberg/blocks/_core-paragraph.scss b/sass/gutenberg/blocks/_core-paragraph.scss
index 39bd7d19..c3970ef9 100644
--- a/sass/gutenberg/blocks/_core-paragraph.scss
+++ b/sass/gutenberg/blocks/_core-paragraph.scss
@@ -18,6 +18,6 @@
 
 @media (max-width: $width-grid-base + 40px) {
   .has-background {
-    width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+    width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
 }
diff --git a/sass/gutenberg/blocks/_core-pullquote.scss b/sass/gutenberg/blocks/_core-pullquote.scss
index 9ee420a8..d123afbf 100644
--- a/sass/gutenberg/blocks/_core-pullquote.scss
+++ b/sass/gutenberg/blocks/_core-pullquote.scss
@@ -11,7 +11,7 @@
   }
 
   @media (max-width: $width-grid-base + 40px) {
-    width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+    width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
 }
 
@@ -25,13 +25,13 @@
   }
 
   @media (max-width: $width-grid-base + 40px) {
-    margin-left: var(--padding-container-horizontal);
-    margin-right: var(--padding-container-horizontal);
+    margin-left: var(--spacing-container-padding-inline);
+    margin-right: var(--spacing-container-padding-inline);
   }
 }
 
 .wp-block-pullquote.alignfull {
-  margin-left: var(--padding-container-horizontal);
-  margin-right: var(--padding-container-horizontal);
-  width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+  margin-left: var(--spacing-container-padding-inline);
+  margin-right: var(--spacing-container-padding-inline);
+  width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
 }
diff --git a/sass/gutenberg/blocks/_core-table.scss b/sass/gutenberg/blocks/_core-table.scss
index 0036e1f5..435c7e16 100644
--- a/sass/gutenberg/blocks/_core-table.scss
+++ b/sass/gutenberg/blocks/_core-table.scss
@@ -55,20 +55,20 @@ table {
 
 .wp-block-table {
   @media (max-width: $width-grid-base + 40px) {
-    width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+    width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
 }
 
 .wp-block-table.alignfull {
-  margin-left: var(--padding-container-horizontal);
-  margin-right: var(--padding-container-horizontal);
-  width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+  margin-left: var(--spacing-container-padding-inline);
+  margin-right: var(--spacing-container-padding-inline);
+  width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
 }
 
 @media (max-width: $width-grid-base + 40px) {
   .wp-block-table.alignwide {
-    margin-left: var(--padding-container-horizontal);
-    margin-right: var(--padding-container-horizontal);
-    width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+    margin-left: var(--spacing-container-padding-inline);
+    margin-right: var(--spacing-container-padding-inline);
+    width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
 }
diff --git a/sass/gutenberg/blocks/_core-video.scss b/sass/gutenberg/blocks/_core-video.scss
index b583863f..3a8a17d0 100644
--- a/sass/gutenberg/blocks/_core-video.scss
+++ b/sass/gutenberg/blocks/_core-video.scss
@@ -6,7 +6,7 @@
 
 @media (max-width: $width-grid-base + 40px) {
   .wp-block-video.alignwide {
-    width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+    width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
 }
 
diff --git a/sass/gutenberg/formatting/_align.scss b/sass/gutenberg/formatting/_align.scss
index 58aa66d0..913b3445 100644
--- a/sass/gutenberg/formatting/_align.scss
+++ b/sass/gutenberg/formatting/_align.scss
@@ -11,7 +11,7 @@
 
   .alignleft > img {
     margin-bottom: var(--margin-between-paragraphs);
-    margin-right: var(--padding-container-horizontal);
+    margin-right: var(--spacing-container-padding-inline);
     margin-top: var(--margin-between-paragraphs);
 
     + figcaption {
@@ -21,7 +21,7 @@
 
   .alignright > img {
     margin-bottom: var(--margin-between-paragraphs);
-    margin-left: var(--padding-container-horizontal);
+    margin-left: var(--spacing-container-padding-inline);
     margin-top: var(--margin-between-paragraphs);
 
     + figcaption {
@@ -31,8 +31,8 @@
 
   .alignwide {
     max-width: $width-wide;
-    padding-left: var(--padding-container-horizontal);
-    padding-right: var(--padding-container-horizontal);
+    padding-left: var(--spacing-container-padding-inline);
+    padding-right: var(--spacing-container-padding-inline);
     width: 100%;
 
     @media (min-width: $width-wide + 40px) {
@@ -52,8 +52,8 @@
     }
 
     @media (min-width: $width-max-article + 40px) {
-      margin-bottom: var(--padding-block);
-      margin-top: var(--padding-block);
+      margin-bottom: var(--spacing-content-padding-block);
+      margin-top: var(--spacing-content-padding-block);
       max-width: $width-full;
       width: $width-full;
     }
diff --git a/sass/gutenberg/layout/_content.scss b/sass/gutenberg/layout/_content.scss
index c629977b..7d3f4920 100644
--- a/sass/gutenberg/layout/_content.scss
+++ b/sass/gutenberg/layout/_content.scss
@@ -2,10 +2,10 @@
 .editor-styles-wrapper,
 .article-content {
   max-width: 100%;
-  padding-bottom: var(--padding-block);
+  padding-bottom: var(--spacing-content-padding-block);
   padding-left: 0;
   padding-right: 0;
-  padding-top: var(--padding-block);
+  padding-top: var(--spacing-content-padding-block);
 }
 
 // Gutenberg core magic
@@ -18,13 +18,13 @@
   max-width: $width-max-article;
 
   @media (max-width: $width-max-article + 40px) {
-    padding-left: var(--padding-container-horizontal);
-    padding-right: var(--padding-container-horizontal);
+    padding-left: var(--spacing-container-padding-inline);
+    padding-right: var(--spacing-container-padding-inline);
 
     &.alignfull {
-      padding-left: var(--padding-container-horizontal);
-      padding-right: var(--padding-container-horizontal);
-      width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+      padding-left: var(--spacing-container-padding-inline);
+      padding-right: var(--spacing-container-padding-inline);
+      width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
     }
   }
 }
diff --git a/sass/layout/_general.scss b/sass/layout/_general.scss
index d099df82..269f5520 100644
--- a/sass/layout/_general.scss
+++ b/sass/layout/_general.scss
@@ -45,16 +45,16 @@
   margin-left: auto;
   margin-right: auto;
   max-width: $width-grid-base;
-  padding-bottom: var(--padding-container-vertical);
-  padding-left: var(--padding-container-horizontal);
-  padding-right: var(--padding-container-horizontal);
-  padding-top: var(--padding-container-vertical);
+  padding-bottom: var(--spacing-container-padding-block);
+  padding-left: var(--spacing-container-padding-inline);
+  padding-right: var(--spacing-container-padding-inline);
+  padding-top: var(--spacing-container-padding-block);
 
   // If base grid is larger than Macbook Air screen
   @if $width-grid-base > 1440 {
     @media (min-width: $container-ipad-landscape) and (max-width: 140rem + 6.4rem) {
-      padding-left: var(--padding-container-horizontal-large);
-      padding-right: var(--padding-container-horizontal-large);
+      padding-left: var(--spacing-container-padding-inline-large);
+      padding-right: var(--spacing-container-padding-inline-large);
     }
   }
 }
diff --git a/sass/layout/_site-header.scss b/sass/layout/_site-header.scss
index 5c032167..8270b4f8 100644
--- a/sass/layout/_site-header.scss
+++ b/sass/layout/_site-header.scss
@@ -7,15 +7,15 @@
   margin-left: auto;
   margin-right: auto;
   max-width: $width-grid-base;
-  padding-bottom: var(--padding-site-header-vertical);
-  padding-left: var(--padding-container-horizontal);
-  padding-right: var(--padding-container-horizontal);
-  padding-top: var(--padding-site-header-vertical);
+  padding-bottom: var(--spacing-site-header-padding-block);
+  padding-left: var(--spacing-container-padding-inline);
+  padding-right: var(--spacing-container-padding-inline);
+  padding-top: var(--spacing-site-header-padding-block);
   position: relative;
   z-index: 15;
 
   @media (max-width: $width-max-mobile) {
-    --padding-container-horizontal: 2rem;
+    --spacing-container-padding-inline: 2rem;
   }
 }
 
@@ -51,10 +51,10 @@
   font-size: clamp(.5rem, 3.4vw, 3rem);
   font-weight: var(--typography-weight-semibold);
   justify-content: center;
-  margin-bottom: var(--padding-container-vertical);
+  margin-bottom: var(--spacing-container-padding-block);
   margin-left: auto;
   margin-right: auto;
-  margin-top: calc(var(--padding-container-vertical) * 2);
+  margin-top: calc(var(--spacing-container-padding-block) * 2);
   // stylelint-disable-next-line
   max-width: $width-grid-base - 40px;
   opacity: .7;
diff --git a/sass/variables/_spacings-new.scss b/sass/variables/_spacings-new.scss
index e530e8b6..0df4771d 100644
--- a/sass/variables/_spacings-new.scss
+++ b/sass/variables/_spacings-new.scss
@@ -11,8 +11,8 @@
   --spacing-content-padding-block: 8rem;
 
   // Margins
-  --spacing-margin-between-text-elements: 4rem;
-  --spacing-margin-wp-block-image: 4rem;
+  --spacing-text-margin-block: 4rem;
+  --spacing-wp-block-image-margin-block: 4rem;
   --spacing-paragraphs-margin-block: 2.7rem;
 
   // Mid-sized screens
diff --git a/sass/variables/_spacings.scss b/sass/variables/_spacings.scss
index 14ecb1a7..0df4771d 100644
--- a/sass/variables/_spacings.scss
+++ b/sass/variables/_spacings.scss
@@ -1,52 +1,52 @@
 // CSS Variables for responsive paddings and margins
 :root {
   // Gaps
-  --grid-gap: 4.8rem;
+  --spacing-grid-gap: 4.8rem;
 
   // Paddings
-  --padding-container-horizontal: 2rem;
-  --padding-container-horizontal-large: 6.4rem;
-  --padding-container-vertical: 6.4rem;
-  --padding-site-header-vertical: 2rem;
-  --padding-block: 8rem;
+  --spacing-container-padding-inline: 2rem;
+  --spacing-container-padding-inline-large: 6.4rem;
+  --spacing-container-padding-block: 6.4rem;
+  --spacing-site-header-padding-block: 2rem;
+  --spacing-content-padding-block: 8rem;
 
   // Margins
-  --margin-between-text-elements: 4rem;
-  --margin-wp-block-image: 4rem;
-  --margin-between-paragraphs: 2.7rem;
+  --spacing-text-margin-block: 4rem;
+  --spacing-wp-block-image-margin-block: 4rem;
+  --spacing-paragraphs-margin-block: 2.7rem;
 
   // Mid-sized screens
   @media (max-width: $width-grid-base + 150px) {
-    --padding-container-horizontal: 6.4rem;
+    --spacing-container-padding-inline: 6.4rem;
   }
 
   // When there's no longer room for container to fit with wider white space
   @media (max-width: 700px) {
-    --padding-container-horizontal: 2rem;
+    --spacing-container-padding-inline: 2rem;
   }
 
   // When navigation transforms to a responsive hamburger menu
   @media (max-width: $width-max-mobile) {
-    --padding-site-header-vertical: 2rem;
+    --spacing-site-header-padding-block: 2rem;
   }
 
   // iPad
   @media (max-width: $container-ipad-landscape) {
-    --grid-gap: 3.2rem;
+    --spacing-grid-gap: 3.2rem;
   }
 
   @media (max-width: $container-ipad) {
-    --grid-gap: var(--padding-container-horizontal);
-    --padding-container-vertical: 5rem;
+    --spacing-grid-gap: var(--spacing-container-padding-inline);
+    --spacing-container-padding-block: 5rem;
   }
 
   // Between iPad and a mobile phone
   @media (max-width: 600px) {
-    --padding-block: 6rem;
+    --spacing-content-padding-block: 6rem;
   }
 
   // Vars in mobile
   @media (max-width: $container-mobile) {
-    --padding-container-vertical: 4rem;
+    --spacing-container-padding-block: 4rem;
   }
 }
diff --git a/sass/views/_single.scss b/sass/views/_single.scss
index 4e12d68b..a4f74b80 100644
--- a/sass/views/_single.scss
+++ b/sass/views/_single.scss
@@ -36,7 +36,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: .5rem;
-  margin-bottom: var(--margin-between-text-elements);
+  margin-bottom: var(--spacing-text-margin-block);
   margin-top: 0;
 
   // stylelint-disable a11y/font-size-is-readable