diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss
index 1c2800fbc..87a7a048e 100644
--- a/core/scss/ui/_cards.scss
+++ b/core/scss/ui/_cards.scss
@@ -209,7 +209,8 @@ Stacked card
 .card-actions {
   --card-actions-gutter: #{$card-actions-gutter};
   padding-inline-start: var(--card-actions-gutter);
-  margin: calc(-1 * var(--card-actions-gutter)) calc(-1 * var(--card-actions-gutter)) calc(-1 * var(--card-actions-gutter)) auto;
+  margin-block: calc(-1 * var(--card-actions-gutter));
+  margin-inline: auto calc(-1 * var(--card-actions-gutter));
 
   a {
     text-decoration: none;
@@ -347,7 +348,8 @@ Stacked card
   }
 
   .card-title & {
-    margin: 0 0 0 var(--card-subtitle-margin-start);
+    margin-block: 0;
+    margin-inline: var(--card-subtitle-margin-start) 0;
     font-size: $h4-font-size;
   }
 }
diff --git a/core/scss/ui/_carousel.scss b/core/scss/ui/_carousel.scss
index a46e51885..39abd5480 100644
--- a/core/scss/ui/_carousel.scss
+++ b/core/scss/ui/_carousel.scss
@@ -6,7 +6,8 @@
   inset-inline-start: auto;
   top: 0;
   flex-direction: column;
-  margin: 0 var(--carousel-indicators-vertical-margin-inline-end) 0 0;
+  margin-block: 0;
+  margin-inline: 0 var(--carousel-indicators-vertical-margin-inline-end);
 
   [data-bs-target],
   [data-target] {
diff --git a/core/scss/ui/_lists.scss b/core/scss/ui/_lists.scss
index 83df6ad95..faf6787ef 100644
--- a/core/scss/ui/_lists.scss
+++ b/core/scss/ui/_lists.scss
@@ -111,11 +111,6 @@ Inline list
   margin: 0;
 }
 
-.list-inline-item:not(:last-child) {
-  margin-inline-end: auto;
-  margin-inline-end: $list-inline-padding;
-}
-
 .list-inline-dots {
   .list-inline-item + .list-inline-item::before {
     margin-inline-end: $list-inline-padding;
diff --git a/core/scss/ui/_modals.scss b/core/scss/ui/_modals.scss
index 78fa09283..d32bfc754 100644
--- a/core/scss/ui/_modals.scss
+++ b/core/scss/ui/_modals.scss
@@ -39,7 +39,8 @@
 .modal-header {
   align-items: center;
   min-height: $modal-header-height;
-  padding: 0 $modal-header-height 0 $modal-inner-padding;
+  padding-block: 0;
+  padding-inline: $modal-inner-padding $modal-header-height;
   background: $modal-header-bg;
 }
 
diff --git a/core/scss/ui/_progress.scss b/core/scss/ui/_progress.scss
index 5fd1e8e12..d76670016 100644
--- a/core/scss/ui/_progress.scss
+++ b/core/scss/ui/_progress.scss
@@ -69,7 +69,7 @@ Progress bar
     bottom: 0;
     content: '';
     background-color: inherit;
-    will-change: left, right;
+    will-change: inset-inline-start, inset-inline-end;
   }
 
   &::before {
diff --git a/core/scss/ui/_ribbons.scss b/core/scss/ui/_ribbons.scss
index caf1b97a5..b84881fdb 100644
--- a/core/scss/ui/_ribbons.scss
+++ b/core/scss/ui/_ribbons.scss
@@ -136,7 +136,7 @@
     border-inline-end-width: 0;
   }
 
-  &.ribbon-left {
+  &.ribbon-start {
     padding-inline-end: var(--ribbon-bookmark-notch-width);
 
     &::after {
diff --git a/core/scss/vendor/_nouislider.scss b/core/scss/vendor/_nouislider.scss
index 1fbb7a776..cc2531598 100644
--- a/core/scss/vendor/_nouislider.scss
+++ b/core/scss/vendor/_nouislider.scss
@@ -37,7 +37,8 @@
     top: calc($form-range-thumb-height * -0.5);
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
-    margin: 1px 1px 0 0;
+    margin-block: 1px 0;
+    margin-inline: 0 1px;
   }
 
   &.noUi-active,
diff --git a/docs/pages/ui/components/ribbon.mdx b/docs/pages/ui/components/ribbon.mdx
index 702d7b160..c835e9687 100644
--- a/docs/pages/ui/components/ribbon.mdx
+++ b/docs/pages/ui/components/ribbon.mdx
@@ -26,7 +26,7 @@ You can change the position of a ribbon by adding one of the following classes t
 - `ribbon-bottom` - moves it to the bottom
 - `ribbon-start` - moves it to the left
 
-Using multiple classes at once will give you more position options. For example, the following class: `.ribbon.ribbon-top.ribbon-left` will move the ribbon to the top left corner.
+Using multiple classes at once will give you more position options. For example, the following class: `.ribbon.ribbon-top.ribbon-start` will move the ribbon to the top left corner.
 
 <Example column>
 <div class="card"> <div class="card-body" style="height: 5rem"></div> <div class="ribbon ribbon-top ribbon-start"> <Icon name="star" /> </div> </div>