diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss
index 2b2b715ca..b5015ddb5 100644
--- a/scss/components/_accordion.scss
+++ b/scss/components/_accordion.scss
@@ -8,7 +8,7 @@
 
   #{$parent-selector} details {
     display: block;
-    margin-bottom: var(#{$css-var-prefix}spacing);
+    margin-block-end: var(#{$css-var-prefix}spacing);
 
     summary {
       line-height: 1rem;
@@ -88,7 +88,7 @@
     // Open
     &[open] {
       > summary {
-        margin-bottom: var(#{$css-var-prefix}spacing);
+        margin-block-end: var(#{$css-var-prefix}spacing);
 
         &:not([role]) {
           &:not(:focus) {
diff --git a/scss/components/_card.scss b/scss/components/_card.scss
index 6d5da281e..ebe7a3c38 100644
--- a/scss/components/_card.scss
+++ b/scss/components/_card.scss
@@ -10,7 +10,7 @@
   #{$parent-selector} [role="article"]:not(:has(> form:first-child)),
   #{$parent-selector} article > form,
   #{$parent-selector} [role="article"] > form {
-    margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
+    margin-block-end: var(#{$css-var-prefix}block-spacing-vertical);
     padding: var(#{$css-var-prefix}block-spacing-vertical)
       var(#{$css-var-prefix}block-spacing-horizontal);
     border-radius: var(#{$css-var-prefix}border-radius);
@@ -19,17 +19,17 @@
 
     > header,
     > footer {
-      margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
-      margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
+      margin-inline-end: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
+      margin-inline-start: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
       padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66)
         var(#{$css-var-prefix}block-spacing-horizontal);
       background-color: var(#{$css-var-prefix}card-sectioning-background-color);
     }
 
     > header {
-      margin-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
-      margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
-      border-bottom: var(#{$css-var-prefix}border-width)
+      margin-block-start: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
+      margin-block-end: var(#{$css-var-prefix}block-spacing-vertical);
+      border-block-end: var(#{$css-var-prefix}border-width)
         solid
         var(#{$css-var-prefix}card-border-color);
       border-top-right-radius: var(#{$css-var-prefix}border-radius);
@@ -41,7 +41,7 @@
       > h4,
       > h5,
       > h6 {
-        margin-bottom: 0;
+        margin-block-end: 0;
       }
 
       > hgroup {
@@ -51,15 +51,15 @@
         > h4,
         > h5,
         > h6 {
-          margin-bottom: 0;
+          margin-block-end: 0;
         }
       }
     }
 
     > footer {
-      margin-top: var(#{$css-var-prefix}block-spacing-vertical);
-      margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
-      border-top: var(#{$css-var-prefix}border-width)
+      margin-block-start: var(#{$css-var-prefix}block-spacing-vertical);
+      margin-block-end: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
+      border-block-start: var(#{$css-var-prefix}border-width)
         solid
         var(#{$css-var-prefix}card-border-color);
       border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
@@ -74,15 +74,15 @@
       nav,
       ul,
       ol {
-        margin-bottom: 0px;
+        margin-block-end: 0px;
 
         &:last-child {
-          margin-bottom: 0px;
+          margin-block-end: 0px;
         }
 
         /* Also remove if next input after button is a hidden input */
         &:has(+ [type="hidden"]) {
-          margin-bottom: 0px;
+          margin-block-end: 0px;
         }
       }
     }
diff --git a/scss/components/_dropdown.scss b/scss/components/_dropdown.scss
index 58b3ed073..0ac815000 100644
--- a/scss/components/_dropdown.scss
+++ b/scss/components/_dropdown.scss
@@ -10,7 +10,7 @@
   // ––––––––––––––––––––
   #{$parent-selector} details.dropdown {
     position: relative;
-    border-bottom: none;
+    border-block-end: none;
 
     @if $enable-transitions {
       &[open] {
@@ -138,7 +138,7 @@
         min-width: 200px;
         min-width: fit-content;
         margin: 0;
-        margin-top: var(#{$css-var-prefix}outline-width);
+        margin-block-start: var(#{$css-var-prefix}outline-width);
         padding: 0;
         border: var(#{$css-var-prefix}border-width)
           solid
@@ -163,22 +163,22 @@
 
         li {
           width: 100%;
-          margin-bottom: 0;
+          margin-block-end: 0;
           padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
             var(#{$css-var-prefix}form-element-spacing-horizontal);
           list-style: none;
 
           &:first-of-type {
-            margin-top: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
+            margin-block-start: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
           }
 
           &:last-of-type {
-            margin-bottom: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
+            margin-block-end: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
           }
 
           details {
             width: 100%;
-            margin-bottom: 0;
+            margin-block-end: 0;
             > summary {
               line-height: var(#{$css-var-prefix}line-height);
             }
@@ -224,7 +224,7 @@
       // Button opened
       // inside container type accordion
       // ––––––––––––––––––––
-      margin-bottom: 0;
+      margin-block-end: 0;
 
       // Close for dropdown
       // inside container type accordion
@@ -263,7 +263,7 @@
     display: inline;
     margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
     // Override height
-    margin-bottom: 0;
+    margin-block-end: 0;
 
     > summary {
       &:not([role]) {
@@ -292,6 +292,6 @@
   // Label
   // ––––––––––––––––––––
   #{$parent-selector} label > details.dropdown {
-    margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
+    margin-block-start: calc(var(#{$css-var-prefix}spacing) * 0.25);
   }
 }
diff --git a/scss/components/_group.scss b/scss/components/_group.scss
index a9152f65a..4e6e252e9 100644
--- a/scss/components/_group.scss
+++ b/scss/components/_group.scss
@@ -15,7 +15,7 @@
     display: inline-flex;
     position: relative;
     width: 100%;
-    margin-bottom: var(#{$css-var-prefix}spacing);
+    margin-block-end: var(#{$css-var-prefix}spacing);
     border-radius: var(#{$css-var-prefix}border-radius);
     box-shadow: var(#{$css-var-prefix}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
     vertical-align: middle;
@@ -36,10 +36,10 @@
     > details {
       position: relative;
       flex: 1 1 auto;
-      margin-bottom: 0;
+      margin-block-end: 0;
 
       &:not(:first-child) {
-        margin-left: 0;
+        margin-inline-start: 0;
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
       }
@@ -56,7 +56,7 @@
 
     > details {
       &:not(:first-child) > summary {
-        margin-left: 0;
+        margin-inline-start: 0;
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
       }
@@ -82,7 +82,7 @@
     > legend,
     > details > summary {
       &:not(:first-child) {
-        margin-left: calc(var(#{$css-var-prefix}border-width) * -1);
+        margin-inline-start: calc(var(#{$css-var-prefix}border-width) * -1);
       }
     }
 
@@ -174,8 +174,8 @@
       > legend,
       > details > summary {
         &:not(:first-child) {
-          margin-right: 0;
-          margin-left: auto;
+          margin-inline-end: 0;
+          margin-inline-start: auto;
           border-top-right-radius: 0;
           border-top-left-radius: var(#{$css-var-prefix}border-radius);
           border-bottom-right-radius: 0;
@@ -201,8 +201,8 @@
       > legend,
       > details > summary {
         &:not(:first-child) {
-          margin-right: calc(var(#{$css-var-prefix}border-width) * -1);
-          margin-left: auto;
+          margin-inline-end: calc(var(#{$css-var-prefix}border-width) * -1);
+          margin-inline-start: auto;
         }
       }
     }
@@ -233,7 +233,7 @@
       + label {
         z-index: 10;
         // label was positioned above placeholder..
-        margin-top: 5px;
+        margin-block-start: 5px;
       }
     }
 
@@ -244,7 +244,7 @@
       > label,
       > legend,
       > details > summary {
-        margin-left: 0;
+        margin-inline-start: 0;
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
       }
diff --git a/scss/components/_modal.scss b/scss/components/_modal.scss
index c1cc8c6ac..f09a018ab 100644
--- a/scss/components/_modal.scss
+++ b/scss/components/_modal.scss
@@ -66,12 +66,12 @@
 
       > header {
         > * {
-          margin-bottom: 0;
+          margin-block-end: 0;
         }
 
         #{$close-selector} {
           margin: 0;
-          margin-left: var(#{$css-var-prefix}spacing);
+          margin-inline-start: var(#{$css-var-prefix}spacing);
           padding: 0;
           float: right;
         }
@@ -82,10 +82,10 @@
 
         button,
         [role="button"] {
-          margin-bottom: 0;
+          margin-block-end: 0;
 
           &:not(:first-of-type) {
-            margin-left: calc(var(#{$css-var-prefix}spacing) * 0.5);
+            margin-inline-start: calc(var(#{$css-var-prefix}spacing) * 0.5);
           }
         }
       }
@@ -95,9 +95,9 @@
         display: block;
         width: 1rem;
         height: 1rem;
-        margin-top: calc(var(#{$css-var-prefix}spacing) * -1);
-        margin-bottom: var(#{$css-var-prefix}spacing);
-        margin-left: auto;
+        margin-block-start: calc(var(#{$css-var-prefix}spacing) * -1);
+        margin-block-end: var(#{$css-var-prefix}spacing);
+        margin-inline-start: auto;
         border: none;
         background-image: var(#{$css-var-prefix}icon-close);
         background-position: center;
@@ -131,7 +131,7 @@
   // Utilities
   @if $enable-classes {
     .modal-is-open {
-      padding-right: var(#{$css-var-prefix}scrollbar-width, 0px);
+      padding-inline-end: var(#{$css-var-prefix}scrollbar-width, 0px);
       overflow: hidden;
       pointer-events: none;
       touch-action: none;
@@ -192,7 +192,7 @@
           > footer {
             display: flex;
             justify-content: flex-end;
-            margin-top: auto;
+            margin-block-start: auto;
           }
         }
       }
diff --git a/scss/components/_nav-hamburger.scss b/scss/components/_nav-hamburger.scss
index dd930bda8..dd4fb6f7d 100644
--- a/scss/components/_nav-hamburger.scss
+++ b/scss/components/_nav-hamburger.scss
@@ -68,7 +68,7 @@
           a {
             display: block;
             margin: 0;
-            border-bottom: 1px solid transparent;
+            border-block-end: 1px solid transparent;
             border-radius: 0;
             transition:
               border-color var(#{$css-var-prefix}transition),
diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss
index 1281c2551..edd0ada50 100644
--- a/scss/components/_nav.scss
+++ b/scss/components/_nav.scss
@@ -33,15 +33,15 @@
     ol,
     ul {
       align-items: center;
-      margin-bottom: 0;
+      margin-block-end: 0;
       padding: 0;
       list-style: none;
 
       &:first-of-type {
-        margin-left: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
+        margin-inline-start: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
       }
       &:last-of-type {
-        margin-right: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
+        margin-inline-end: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
       }
     }
 
@@ -71,9 +71,9 @@
       input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
       select {
         height: auto;
-        margin-right: inherit;
-        margin-bottom: 0;
-        margin-left: inherit;
+        margin-inline-end: inherit;
+        margin-block-end: 0;
+        margin-inline-start: inherit;
         padding: calc(
             var(#{$css-var-prefix}nav-link-spacing-vertical) -
               (var(#{$css-var-prefix}border-width) * 2)
diff --git a/scss/components/_popover-toast.scss b/scss/components/_popover-toast.scss
index 309dd03fe..234334176 100644
--- a/scss/components/_popover-toast.scss
+++ b/scss/components/_popover-toast.scss
@@ -25,7 +25,7 @@
       background: rgba(0, 0, 0, 0.7);
     }
     button {
-      margin-top: -10px;
+      margin-block-start: -10px;
       padding: 0;
       border: 0 none;
       background: transparent;
diff --git a/scss/components/_popover.scss b/scss/components/_popover.scss
index f251a219a..3f803460f 100644
--- a/scss/components/_popover.scss
+++ b/scss/components/_popover.scss
@@ -14,7 +14,7 @@
       background: rgba(0, 0, 0, 0.7);
     }
     button {
-      margin-top: -10px;
+      margin-block-start: -10px;
       padding: 0;
       border: 0 none;
       background: transparent;
diff --git a/scss/components/_progress.scss b/scss/components/_progress.scss
index d7e0a9fd6..66700885c 100644
--- a/scss/components/_progress.scss
+++ b/scss/components/_progress.scss
@@ -31,7 +31,7 @@
     appearance: none;
     width: 100%;
     height: 0.5rem;
-    margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
+    margin-block-end: calc(var(#{$css-var-prefix}spacing) * 0.5);
     overflow: hidden;
 
     // Remove Firefox and Opera border
diff --git a/scss/components/_tab-region.scss b/scss/components/_tab-region.scss
index f89886ed3..601a736c9 100644
--- a/scss/components/_tab-region.scss
+++ b/scss/components/_tab-region.scss
@@ -10,12 +10,12 @@
   #{$parent-selector} section[role="region"] {
     display: flex;
     flex-wrap: wrap;
-    margin-bottom: 0;
+    margin-block-end: 0;
 
     details {
       display: contents;
-      margin-bottom: 0;
-      padding-bottom: 0;
+      margin-block-end: 0;
+      padding-block-end: 0;
 
       summary {
         flex-grow: 1;
@@ -23,7 +23,7 @@
         margin: 0;
         padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.75)
           calc(var(#{$css-var-prefix}block-spacing-horizontal) * 1.5);
-        border-bottom: 1px solid transparent; //(#{$css-var-prefix}primary-background);
+        border-block-end: 1px solid transparent; //(#{$css-var-prefix}primary-background);
         background-color: var(#{$css-var-prefix}card-sectioning-background-color);
         list-style-type: none;
         touch-action: manipulation;
@@ -69,7 +69,7 @@
           order: 1;
           width: 100%;
           padding: var(#{$css-var-prefix}spacing);
-          padding-bottom: 0;
+          padding-block-end: 0;
           opacity: 1;
           transition: opacity var(#{$css-var-prefix}transition);
         }
diff --git a/scss/components/_tab.scss b/scss/components/_tab.scss
index 3251e1288..3a32abab2 100644
--- a/scss/components/_tab.scss
+++ b/scss/components/_tab.scss
@@ -25,14 +25,14 @@
   #{$parent-selector} [role="tablist"] {
     display: flex;
     flex-wrap: wrap; // make sure it wraps
-    padding-bottom: 0;
+    padding-block-end: 0;
 
     > button[role="tab"] {
       flex-grow: 1;
       order: 1; // Put the labels first
       padding: calc(var(#{$css-var-prefix}spacing) * 0.625);
       border: 0;
-      border-bottom: 1px solid var(#{$css-var-prefix}primary-background);
+      border-block-end: 1px solid var(#{$css-var-prefix}primary-background);
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
       background: transparent;
@@ -77,7 +77,7 @@
         display: none;
       }
       > *:last-of-type {
-        margin-bottom: 0;
+        margin-block-end: 0;
       }
     }
   }
@@ -92,8 +92,8 @@
       [role="tabpanel"],
       button {
         width: 100%;
-        margin-top: 0.2rem;
-        margin-right: 0;
+        margin-block-start: 0.2rem;
+        margin-inline-end: 0;
       }
     }
   }
diff --git a/scss/components/_timeline.scss b/scss/components/_timeline.scss
index 830ae3c35..ed2aad725 100644
--- a/scss/components/_timeline.scss
+++ b/scss/components/_timeline.scss
@@ -16,7 +16,7 @@
       bottom: 0;
       left: 50%;
       width: 6px;
-      margin-left: -3px;
+      margin-inline-start: -3px;
       background-color: var(#{$css-var-prefix}timeline-line-color);
       content: "";
     }
@@ -103,8 +103,8 @@
       > .point {
         // Full-width containers
         width: 100%;
-        padding-right: 25px;
-        padding-left: 40px;
+        padding-inline-end: 25px;
+        padding-inline-start: 40px;
 
         // Make all right containers behave like the left ones
         &.right {
diff --git a/scss/components/_tooltip.scss b/scss/components/_tooltip.scss
index ff4dccf15..3732843f7 100644
--- a/scss/components/_tooltip.scss
+++ b/scss/components/_tooltip.scss
@@ -10,7 +10,7 @@
     position: relative;
 
     &:not(:has(a, button, input, [role="button"])):not(a, button, input, [role="button"]) {
-      border-bottom: 1px dotted;
+      border-block-end: 1px dotted;
       text-decoration: none;
       cursor: help;
     }
@@ -50,9 +50,9 @@
       width: 0;
       padding: 0;
       transform: translate(-50%, 0rem);
-      border-top: 0.3rem solid;
-      border-right: 0.3rem solid transparent;
-      border-left: 0.3rem solid transparent;
+      border-block-start: 0.3rem solid;
+      border-inline-end: 0.3rem solid transparent;
+      border-inline-start: 0.3rem solid transparent;
       border-radius: 0;
       background-color: transparent;
       content: "";
@@ -70,7 +70,7 @@
       &:after {
         transform: translate(-50%, -0.3rem);
         border: 0.3rem solid transparent;
-        border-bottom: 0.3rem solid;
+        border-block-end: 0.3rem solid;
       }
     }
 
@@ -87,7 +87,7 @@
       &:after {
         transform: translate(0.3rem, -50%);
         border: 0.3rem solid transparent;
-        border-left: 0.3rem solid;
+        border-inline-start: 0.3rem solid;
       }
     }
 
@@ -104,7 +104,7 @@
       &:after {
         transform: translate(-0.3rem, -50%);
         border: 0.3rem solid transparent;
-        border-right: 0.3rem solid;
+        border-inline-end: 0.3rem solid;
       }
     }
 
diff --git a/scss/content/_button.scss b/scss/content/_button.scss
index e1b2377a3..eb2e6220c 100644
--- a/scss/content/_button.scss
+++ b/scss/content/_button.scss
@@ -88,7 +88,7 @@
   #{$parent-selector} [type="submit"],
   #{$parent-selector} [type="reset"],
   #{$parent-selector} [type="button"] {
-    margin-bottom: var(#{$css-var-prefix}spacing);
+    margin-block-end: var(#{$css-var-prefix}spacing);
   }
 
   // .secondary, .contrast & .outline
diff --git a/scss/content/_code.scss b/scss/content/_code.scss
index 6543d88e6..709445ce0 100644
--- a/scss/content/_code.scss
+++ b/scss/content/_code.scss
@@ -54,7 +54,7 @@
 
   #{$parent-selector} pre {
     display: block;
-    margin-bottom: var(#{$css-var-prefix}spacing);
+    margin-block-end: var(#{$css-var-prefix}spacing);
 
     > code {
       display: block;
diff --git a/scss/content/_misc.scss b/scss/content/_misc.scss
index d8af7bb82..602f0f340 100644
--- a/scss/content/_misc.scss
+++ b/scss/content/_misc.scss
@@ -17,7 +17,7 @@
     height: 0; // 2
     margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
     border: 0;
-    border-top: 1px solid var(#{$css-var-prefix}muted-border-color);
+    border-block-start: 1px solid var(#{$css-var-prefix}muted-border-color);
     color: inherit; // 1
   }
 
diff --git a/scss/content/_table.scss b/scss/content/_table.scss
index 990094169..6dc930451 100644
--- a/scss/content/_table.scss
+++ b/scss/content/_table.scss
@@ -27,7 +27,7 @@
   #{$parent-selector} table th,
   #{$parent-selector} table td {
     padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing);
-    border-bottom: var(#{$css-var-prefix}border-width)
+    border-block-end: var(#{$css-var-prefix}border-width)
       solid
       var(#{$css-var-prefix}table-border-color);
     background-color: var(#{$css-var-prefix}background-color);
@@ -51,10 +51,10 @@
   #{$parent-selector} table > tfoot {
     th,
     td {
-      border-top: var(#{$css-var-prefix}border-width)
+      border-block-start: var(#{$css-var-prefix}border-width)
         solid
         var(#{$css-var-prefix}table-border-color);
-      border-bottom: 0;
+      border-block-end: 0;
     }
   }
 
diff --git a/scss/content/_typography.scss b/scss/content/_typography.scss
index e96aace3d..39dc05518 100644
--- a/scss/content/_typography.scss
+++ b/scss/content/_typography.scss
@@ -43,8 +43,8 @@
   #{$parent-selector} pre,
   #{$parent-selector} table,
   #{$parent-selector} ul {
-    margin-top: 0;
-    margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
+    margin-block-start: 0;
+    margin-block-end: var(#{$css-var-prefix}typography-spacing-vertical);
     color: var(#{$css-var-prefix}color);
     font-style: normal;
     font-weight: var(#{$css-var-prefix}font-weight);
@@ -57,8 +57,8 @@
   #{$parent-selector} h4,
   #{$parent-selector} h5,
   #{$parent-selector} h6 {
-    margin-top: 0;
-    margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
+    margin-block-start: 0;
+    margin-block-end: var(#{$css-var-prefix}typography-spacing-vertical);
     color: var(#{$css-var-prefix}color);
     font-weight: var(#{$css-var-prefix}font-weight);
     font-size: var(#{$css-var-prefix}font-size);
@@ -89,22 +89,22 @@
   #{$parent-selector}
     :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
     ~ :is(h1, h2, h3, h4, h5, h6) {
-      margin-top: var(#{$css-var-prefix}typography-spacing-top);
+      margin-block-start: var(#{$css-var-prefix}typography-spacing-top);
     }
   }
 
   // Paragraphs
   #{$parent-selector} p {
-    margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
+    margin-block-end: var(#{$css-var-prefix}typography-spacing-vertical);
   }
 
   // Heading group
   #{$parent-selector} hgroup {
-    margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
+    margin-block-end: var(#{$css-var-prefix}typography-spacing-vertical);
 
     > * {
-      margin-top: 0;
-      margin-bottom: 0;
+      margin-block-start: 0;
+      margin-block-end: 0;
     }
 
     > *:not(:first-child):last-child {
@@ -117,7 +117,7 @@
   // Lists
   #{$parent-selector} :where(ol, ul) {
     li {
-      margin-bottom: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
+      margin-block-end: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
     }
   }
 
@@ -125,7 +125,7 @@
   // 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
   #{$parent-selector} :where(dl, ol, ul) :where(dl, ol, ul) {
     margin: 0; // 1
-    margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
+    margin-block-start: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
   }
 
   #{$parent-selector} ul li {
@@ -145,13 +145,13 @@
     display: block;
     margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
     padding: var(#{$css-var-prefix}spacing);
-    border-right: none;
-    border-left: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
+    border-inline-end: none;
+    border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
     border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
     border-inline-end: none;
 
     footer {
-      margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.5);
+      margin-block-start: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.5);
       color: var(#{$css-var-prefix}blockquote-footer-color);
     }
   }
@@ -159,7 +159,7 @@
   // Abbreviations
   // 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
   #{$parent-selector} abbr[title] {
-    border-bottom: 1px dotted;
+    border-block-end: 1px dotted;
     text-decoration: none; // 1
     cursor: help;
   }
diff --git a/scss/forms/_basics.scss b/scss/forms/_basics.scss
index 6badf5a30..0e607893d 100644
--- a/scss/forms/_basics.scss
+++ b/scss/forms/_basics.scss
@@ -132,7 +132,7 @@
   #{$parent-selector} fieldset {
     width: 100%;
     margin: 0;
-    margin-bottom: var(#{$css-var-prefix}spacing);
+    margin-block-end: var(#{$css-var-prefix}spacing);
     padding: 0;
     border: 0;
   }
@@ -141,13 +141,13 @@
   #{$parent-selector} *:not([role="group"]) > label,
   #{$parent-selector} fieldset:not([role="group"]) > legend {
     display: block;
-    margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.375);
+    margin-block-end: calc(var(#{$css-var-prefix}spacing) * 0.375);
     color: var(#{$css-var-prefix}color);
     font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight));
   }
 
   #{$parent-selector} fieldset:not([role="group"]) > legend {
-    margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
+    margin-block-end: calc(var(#{$css-var-prefix}spacing) * 0.5);
   }
 
   // Blocks, 100%
@@ -278,17 +278,17 @@
       ) {
       &[aria-invalid] {
         @if $enable-important {
-          padding-right: calc(
+          padding-inline-end: calc(
             var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
           ) !important;
-          padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
+          padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
           padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
           padding-inline-end: calc(
             var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
           ) !important;
         } @else {
-          padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
-          padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
+          padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
+          padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
           padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
           padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
         }
@@ -400,7 +400,7 @@
   #{$parent-selector} textarea,
   #{$parent-selector} [role="group"] > label,
   #{$parent-selector} [role="group"] > legend {
-    margin-bottom: var(#{$css-var-prefix}spacing);
+    margin-block-end: var(#{$css-var-prefix}spacing);
   }
 
   // Select
@@ -412,8 +412,8 @@
     }
 
     &:not([multiple], [size]) {
-      padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
-      padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
+      padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
+      padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
       padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
       padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
       background-image: var(#{$css-var-prefix}icon-chevron);
@@ -470,8 +470,8 @@
     + small {
       display: block;
       width: 100%;
-      margin-top: calc(var(#{$css-var-prefix}spacing) * -0.75);
-      margin-bottom: var(#{$css-var-prefix}spacing);
+      margin-block-start: calc(var(#{$css-var-prefix}spacing) * -0.75);
+      margin-block-end: var(#{$css-var-prefix}spacing);
       color: var(#{$css-var-prefix}muted-color);
     }
     &[aria-invalid="false"] {
@@ -489,7 +489,7 @@
   // Styles for Input inside a label
   #{$parent-selector} label {
     > :where(input, select, textarea) {
-      margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
+      margin-block-start: calc(var(#{$css-var-prefix}spacing) * 0.25);
     }
   }
 }
diff --git a/scss/forms/_checkbox-radio-switch.scss b/scss/forms/_checkbox-radio-switch.scss
index 88542d0d4..4f4b60d31 100644
--- a/scss/forms/_checkbox-radio-switch.scss
+++ b/scss/forms/_checkbox-radio-switch.scss
@@ -22,7 +22,7 @@
     appearance: none;
     width: 1.25em;
     height: 1.25em;
-    margin-top: -0.125em;
+    margin-block-start: -0.125em;
     margin-inline-end: 0.5em;
     border-width: var(#{$css-var-prefix}border-width);
     vertical-align: middle;
@@ -45,7 +45,7 @@
 
     & ~ label {
       display: inline-block;
-      margin-bottom: 0;
+      margin-block-end: 0;
       cursor: pointer;
 
       &:not(:last-of-type) {
diff --git a/scss/forms/_floating.scss b/scss/forms/_floating.scss
index 69333f891..d6411882d 100644
--- a/scss/forms/_floating.scss
+++ b/scss/forms/_floating.scss
@@ -7,7 +7,7 @@
 
   #{$parent-selector} section[role="form"] {
     position: relative;
-    margin-bottom: 0;
+    margin-block-end: 0;
 
     > input::placeholder,
     > textarea::placeholder {
diff --git a/scss/forms/_input-date.scss b/scss/forms/_input-date.scss
index 823910752..15308c074 100644
--- a/scss/forms/_input-date.scss
+++ b/scss/forms/_input-date.scss
@@ -11,7 +11,7 @@
     &:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
       #{$css-var-prefix}icon-position: 0.75rem;
       #{$css-var-prefix}icon-width: 1rem;
-      padding-right: calc(var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position));
+      padding-inline-end: calc(var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position));
       background-image: var(#{$css-var-prefix}icon-date);
       background-position: center right var(#{$css-var-prefix}icon-position);
       background-size: var(#{$css-var-prefix}icon-width) auto;
@@ -32,8 +32,8 @@
   #{$parent-selector} [type="week"] {
     &::-webkit-calendar-picker-indicator {
       width: var(#{$css-var-prefix}icon-width);
-      margin-right: calc(var(#{$css-var-prefix}icon-width) * -1);
-      margin-left: var(#{$css-var-prefix}icon-position);
+      margin-inline-end: calc(var(#{$css-var-prefix}icon-width) * -1);
+      margin-inline-start: var(#{$css-var-prefix}icon-position);
       opacity: 0;
     }
   }
@@ -46,7 +46,7 @@
       #{$parent-selector} [type="month"],
       #{$parent-selector} [type="time"],
       #{$parent-selector} [type="week"] {
-        padding-right: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
+        padding-inline-end: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
         background-image: none !important;
       }
     }
diff --git a/scss/forms/_input-file.scss b/scss/forms/_input-file.scss
index a758dc4a2..8ecb84488 100644
--- a/scss/forms/_input-file.scss
+++ b/scss/forms/_input-file.scss
@@ -10,15 +10,15 @@
   //    with the forced overflow hidden on the input[type="file"] element.
   #{$parent-selector} [type="file"] {
     #{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
-    margin-left: calc(var(#{$css-var-prefix}outline-width) * -1); // 1
+    margin-inline-start: calc(var(#{$css-var-prefix}outline-width) * -1); // 1
     padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) 0;
-    padding-left: var(#{$css-var-prefix}outline-width); // 1
+    padding-inline-start: var(#{$css-var-prefix}outline-width); // 1
     border: 0;
     border-radius: 0;
     background: none;
 
     &::file-selector-button {
-      margin-right: calc(var(#{$css-var-prefix}spacing) / 2);
+      margin-inline-end: calc(var(#{$css-var-prefix}spacing) / 2);
       padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
         var(#{$css-var-prefix}form-element-spacing-horizontal);
     }
diff --git a/scss/forms/_input-range.scss b/scss/forms/_input-range.scss
index 40fec1597..bf51755b4 100644
--- a/scss/forms/_input-range.scss
+++ b/scss/forms/_input-range.scss
@@ -25,7 +25,7 @@ $border-thumb: 2px;
   -webkit-appearance: none;
   width: $height-thumb;
   height: $height-thumb;
-  margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
+  margin-block-start: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
   border: $border-thumb solid var(#{$css-var-prefix}range-thumb-border-color);
   border-radius: 50%;
   background-color: var(#{$css-var-prefix}range-thumb-color);
diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss
index d14a18ffb..8365de3f0 100644
--- a/scss/forms/_validation.scss
+++ b/scss/forms/_validation.scss
@@ -9,7 +9,7 @@
   #{$parent-selector} form:not([novalidate]) {
     input:user-valid:not(#{$excluded-elements}),
     input:user-invalid:not(#{$excluded-elements}) {
-      padding-right: calc(1.5em + 0.75rem);
+      padding-inline-end: calc(1.5em + 0.75rem);
       background-position: right calc(0.375em + 0.1875rem) center;
       background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
       background-repeat: no-repeat;
@@ -17,8 +17,8 @@
 
     select:user-valid:not([multiple], [size]),
     select:user-invalid:not([multiple], [size]) {
-      padding-right: calc(1.5em + 0.75rem);
-      padding-right: 4.2rem;
+      padding-inline-end: calc(1.5em + 0.75rem);
+      padding-inline-end: 4.2rem;
       background-position:
         right 0.75rem center,
         center right 2.25rem;
@@ -35,7 +35,7 @@
 
     textarea:user-valid:not(:placeholder-shown),
     textarea:user-invalid:not(:placeholder-shown) {
-      padding-right: calc(1.5em + 0.75rem);
+      padding-inline-end: calc(1.5em + 0.75rem);
       background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
       background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
       background-repeat: no-repeat;
@@ -103,7 +103,7 @@
 
     /* File list when selected from the file input */
     .file-list {
-      padding-left: 0;
+      padding-inline-start: 0;
       li {
         display: flex;
         align-items: center;
@@ -123,9 +123,9 @@
           display: inline-block;
           width: 1rem;
           height: 1rem;
-          margin-right: 10px;
+          margin-inline-end: 10px;
           padding: 0;
-          padding-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
+          padding-block-start: calc(var(#{$css-var-prefix}spacing) * 0.25);
           border: none;
           background-image: var(#{$css-var-prefix}icon-red-close);
           background-position: center;
diff --git a/scss/layout/_container.scss b/scss/layout/_container.scss
index 8c74f84f9..de53d7bae 100644
--- a/scss/layout/_container.scss
+++ b/scss/layout/_container.scss
@@ -9,10 +9,10 @@
   #{$parent-selector} .container,
   #{$parent-selector} .container-fluid {
     width: 100%;
-    margin-right: auto;
-    margin-left: auto;
-    padding-right: var(#{$css-var-prefix}spacing);
-    padding-left: var(#{$css-var-prefix}spacing);
+    margin-inline-end: auto;
+    margin-inline-start: auto;
+    padding-inline-end: var(#{$css-var-prefix}spacing);
+    padding-inline-start: var(#{$css-var-prefix}spacing);
   }
 
   #{$parent-selector} .container {
@@ -23,8 +23,8 @@
           max-width: map.get($values, "viewport");
           @if $first-breakpoint {
             $first-breakpoint: false;
-            padding-right: 0;
-            padding-left: 0;
+            padding-inline-end: 0;
+            padding-inline-start: 0;
           }
         }
       }
diff --git a/scss/layout/_landmarks.scss b/scss/layout/_landmarks.scss
index 30dcac1c3..7be55bcbf 100644
--- a/scss/layout/_landmarks.scss
+++ b/scss/layout/_landmarks.scss
@@ -37,8 +37,8 @@
       @if $enable-semantic-container {
         $first-breakpoint: true;
         width: 100%;
-        margin-right: auto;
-        margin-left: auto;
+        margin-inline-end: auto;
+        margin-inline-start: auto;
         padding: var(#{$css-var-prefix}block-spacing-vertical)
           var(#{$css-var-prefix}block-spacing-horizontal);
 
@@ -49,8 +49,8 @@
                 max-width: map.get($values, "viewport");
                 @if $first-breakpoint {
                   $first-breakpoint: false;
-                  padding-right: 0;
-                  padding-left: 0;
+                  padding-inline-end: 0;
+                  padding-inline-start: 0;
                 }
               }
             }
diff --git a/scss/layout/_section.scss b/scss/layout/_section.scss
index d938df712..3e3b75623 100644
--- a/scss/layout/_section.scss
+++ b/scss/layout/_section.scss
@@ -7,6 +7,6 @@
    */
 
   #{$parent-selector} section {
-    margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
+    margin-block-end: var(#{$css-var-prefix}block-spacing-vertical);
   }
 }
diff --git a/scss/themes/default/_styles.scss b/scss/themes/default/_styles.scss
index f23e0a2c6..4c2c54d76 100644
--- a/scss/themes/default/_styles.scss
+++ b/scss/themes/default/_styles.scss
@@ -249,37 +249,37 @@
     h1 {
       #{$css-var-prefix}font-size: 2rem;
       #{$css-var-prefix}line-height: 1.125;
-      #{$css-var-prefix}typography-spacing-top: 3rem;
+      #{$css-var-prefix}typography-spacing-block-start: 3rem;
     }
 
     h2 {
       #{$css-var-prefix}font-size: 1.75rem;
       #{$css-var-prefix}line-height: 1.15;
-      #{$css-var-prefix}typography-spacing-top: 2.625rem;
+      #{$css-var-prefix}typography-spacing-block-start: 2.625rem;
     }
 
     h3 {
       #{$css-var-prefix}font-size: 1.5rem;
       #{$css-var-prefix}line-height: 1.175;
-      #{$css-var-prefix}typography-spacing-top: 2.25rem;
+      #{$css-var-prefix}typography-spacing-block-start: 2.25rem;
     }
 
     h4 {
       #{$css-var-prefix}font-size: 1.25rem;
       #{$css-var-prefix}line-height: 1.2;
-      #{$css-var-prefix}typography-spacing-top: 1.874rem;
+      #{$css-var-prefix}typography-spacing-block-start: 1.874rem;
     }
 
     h5 {
       #{$css-var-prefix}font-size: 1.125rem;
       #{$css-var-prefix}line-height: 1.225;
-      #{$css-var-prefix}typography-spacing-top: 1.6875rem;
+      #{$css-var-prefix}typography-spacing-block-start: 1.6875rem;
     }
 
     h6 {
       #{$css-var-prefix}font-size: 1rem;
       #{$css-var-prefix}line-height: 1.25;
-      #{$css-var-prefix}typography-spacing-top: 1.5rem;
+      #{$css-var-prefix}typography-spacing-block-start: 1.5rem;
     }
   }