diff --git a/src/components/Article/Article.stories.svelte b/src/components/Article/Article.stories.svelte
index f403f164..1378e912 100644
--- a/src/components/Article/Article.stories.svelte
+++ b/src/components/Article/Article.stories.svelte
@@ -70,7 +70,7 @@
   :global(#article-column-widths-demo) {
     background-color: #ddd;
     position: relative;
-    margin-bottom: 10px;
+    margin-block-end: 10px;
   }
   :global(#article-column-widths-demo .article-boundaries) {
     padding: 0;
@@ -86,7 +86,7 @@
   :global(#article-column-widths-demo div.article-block) {
     height: 300px;
     background: #81a1c1;
-    margin-bottom: 2px;
+    margin-block-end: 2px;
     height: 50px;
     padding-inline-start: 3px;
     color: white;
diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
index 414497cc..adf8250a 100644
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -296,10 +296,10 @@
     .overlay-container {
       top: 0;
       :global(:first-child) {
-        margin-top: 0;
+        margin-block-start: 0;
       }
       :global(:last-child) {
-        margin-bottom: 0;
+        margin-block-end: 0;
       }
       &.before {
         left: 0;
diff --git a/src/components/Block/Block.stories.svelte b/src/components/Block/Block.stories.svelte
index 42826ec0..ce95e9fb 100644
--- a/src/components/Block/Block.stories.svelte
+++ b/src/components/Block/Block.stories.svelte
@@ -142,7 +142,7 @@
     background: #81a1c1;
   }
   :global(#block-demo-article div.article-block.block-snap-widths-demo) {
-    margin-bottom: 2px;
+    margin-block-end: 2px;
     height: 40px;
     font-size: 11px;
   }
diff --git a/src/components/EndNotes/EndNotes.svelte b/src/components/EndNotes/EndNotes.svelte
index 7c921bec..01913fb2 100644
--- a/src/components/EndNotes/EndNotes.svelte
+++ b/src/components/EndNotes/EndNotes.svelte
@@ -44,7 +44,7 @@
       @include mixins.font-medium;
       @include mixins.tracking-normal;
       @include mixins.fmt-3;
-      margin-bottom: 0.125rem;
+      margin-block-end: 0.125rem;
       text-transform: none;
     }
   }
diff --git a/src/components/Framer/Resizer/index.svelte b/src/components/Framer/Resizer/index.svelte
index 6eea7de8..66942e07 100644
--- a/src/components/Framer/Resizer/index.svelte
+++ b/src/components/Framer/Resizer/index.svelte
@@ -168,7 +168,7 @@
       background-color: rgba(255, 255, 255, 0.8);
       padding: 4px 8px;
       border-radius: 4px;
-      margin-right: 5px;
+      margin-inline-end: 5px;
     }
     button.icon {
       font-size: 14px;
diff --git a/src/components/Framer/Typeahead/index.svelte b/src/components/Framer/Typeahead/index.svelte
index cbd62dad..42e978c7 100644
--- a/src/components/Framer/Typeahead/index.svelte
+++ b/src/components/Framer/Typeahead/index.svelte
@@ -350,7 +350,7 @@
   }
 
   :global([data-svelte-search] label) {
-    margin-bottom: 0.25rem;
+    margin-block-end: 0.25rem;
     display: inline-flex;
     font-size: 0.75rem;
     color: #aaa;
diff --git a/src/components/HeroHeadline/HeroHeadline.mdx b/src/components/HeroHeadline/HeroHeadline.mdx
index 5fe0dde6..1091015b 100644
--- a/src/components/HeroHeadline/HeroHeadline.mdx
+++ b/src/components/HeroHeadline/HeroHeadline.mdx
@@ -51,7 +51,7 @@ In the graphics kit, set styles in `global.scss` to make the Reuters site header
   border: none !important;
 }
 .hero-wrapper {
-  margin-top: -64px;
+  margin-block-start: -64px;
 }
 ```
 
@@ -316,7 +316,7 @@ Add styles in `global.scss`:
   }
 
   .dek {
-    margin-top: 1rem;
+    margin-block-start: 1rem;
     p {
       color: #ffffff;
       text-shadow: 1px 1px 8px #ff7c88;
diff --git a/src/components/HeroHeadline/HeroHeadline.stories.svelte b/src/components/HeroHeadline/HeroHeadline.stories.svelte
index 7311cbd5..5e4000e7 100644
--- a/src/components/HeroHeadline/HeroHeadline.stories.svelte
+++ b/src/components/HeroHeadline/HeroHeadline.stories.svelte
@@ -259,7 +259,7 @@
       }
 
       .dek {
-        margin-top: 1rem;
+        margin-block-start: 1rem;
         p {
           color: #ffffff;
           text-shadow: 1px 1px 8px #ff7c88;
@@ -281,7 +281,7 @@
     }
 
     :global(.hero-wrapper) {
-      margin-top: -64px;
+      margin-block-start: -64px;
     }
   }
 </style>
diff --git a/src/components/PhotoPack/PhotoPack.svelte b/src/components/PhotoPack/PhotoPack.svelte
index 50f23855..51f2d359 100644
--- a/src/components/PhotoPack/PhotoPack.svelte
+++ b/src/components/PhotoPack/PhotoPack.svelte
@@ -85,7 +85,7 @@
       <div
         class="photopack-row flex justify-between"
         style:gap="0 {gap}px"
-        style:margin-bottom={ri < rows.length - 1 ? gap + 'px' : ''}
+        style:margin-block-end={ri < rows.length - 1 ? gap + 'px' : ''}
       >
         {#each row as img, i}
           <figure
diff --git a/src/components/ReferralBlock/ReferralBlock.svelte b/src/components/ReferralBlock/ReferralBlock.svelte
index bdf825c7..889bed68 100644
--- a/src/components/ReferralBlock/ReferralBlock.svelte
+++ b/src/components/ReferralBlock/ReferralBlock.svelte
@@ -182,7 +182,7 @@
   }
 
   div.heading {
-    margin-top: 0;
+    margin-block-start: 0;
     font-family: Knowledge, sans-serif;
     &.stacked {
       max-width: 450px;
diff --git a/src/components/Scroller/Embedded/Foreground.svelte b/src/components/Scroller/Embedded/Foreground.svelte
index a5e5c601..a1f451bc 100644
--- a/src/components/Scroller/Embedded/Foreground.svelte
+++ b/src/components/Scroller/Embedded/Foreground.svelte
@@ -42,7 +42,7 @@
 <style lang="scss">
   div.embedded-foreground {
     :global(p:last-child) {
-      margin-bottom: 0;
+      margin-block-end: 0;
     }
   }
 </style>
diff --git a/src/components/Scroller/Foreground.svelte b/src/components/Scroller/Foreground.svelte
index f0f26f90..e42912ff 100644
--- a/src/components/Scroller/Foreground.svelte
+++ b/src/components/Scroller/Foreground.svelte
@@ -54,10 +54,10 @@
       background: rgba(255, 255, 255, 0.9);
 
       :global(p:last-child) {
-        margin-bottom: 0;
+        margin-block-end: 0;
       }
       :global(*:first-child) {
-        margin-top: 0;
+        margin-block-start: 0;
       }
     }
   }
diff --git a/src/components/SiteFooter/CompanyLinks.svelte b/src/components/SiteFooter/CompanyLinks.svelte
index 33c9f092..e6703d15 100644
--- a/src/components/SiteFooter/CompanyLinks.svelte
+++ b/src/components/SiteFooter/CompanyLinks.svelte
@@ -148,7 +148,7 @@
   section.company {
     max-width: 100%;
     h2 {
-      margin-bottom: 12px;
+      margin-block-end: 12px;
       line-height: 1.333;
       font-size: 16px;
       color: var(--nav-primary);
diff --git a/src/components/SiteFooter/LegalLinks.svelte b/src/components/SiteFooter/LegalLinks.svelte
index b3ba19ef..c4e950f3 100644
--- a/src/components/SiteFooter/LegalLinks.svelte
+++ b/src/components/SiteFooter/LegalLinks.svelte
@@ -151,7 +151,7 @@
 
     li {
       display: inline-flex;
-      margin-right: 16px;
+      margin-inline-end: 16px;
       list-style: none;
       align-items: center;
       a {
diff --git a/src/components/SiteFooter/QuickLinks.svelte b/src/components/SiteFooter/QuickLinks.svelte
index 648bcd4c..f17363b3 100644
--- a/src/components/SiteFooter/QuickLinks.svelte
+++ b/src/components/SiteFooter/QuickLinks.svelte
@@ -223,7 +223,7 @@
       grid-row: 1;
 
       .media {
-        margin-top: 24px;
+        margin-block-start: 24px;
       }
     }
 
@@ -242,13 +242,13 @@
     }
 
     .stay-informed {
-      margin-top: 24px;
+      margin-block-start: 24px;
     }
   }
 
   .symbol {
     width: 20px;
-    margin-right: 16px;
+    margin-inline-end: 16px;
   }
 
   .visually-hidden {
diff --git a/src/components/SiteFooter/SiteFooter.svelte b/src/components/SiteFooter/SiteFooter.svelte
index 80f6a2de..ece8bd18 100644
--- a/src/components/SiteFooter/SiteFooter.svelte
+++ b/src/components/SiteFooter/SiteFooter.svelte
@@ -69,7 +69,7 @@
 
 <style lang="scss">
   footer {
-    margin-top: 0;
+    margin-block-start: 0;
     background-color: var(--nav-background, #fff);
     div {
       max-width: 1400px;
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte b/src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte
index 3bc46a18..6e0508a0 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte
@@ -61,7 +61,7 @@
 
   .more-section-group {
     &.has-children {
-      margin-bottom: 20px;
+      margin-block-end: 20px;
     }
 
     .subsections {
@@ -83,7 +83,7 @@
         font-weight: 400;
         display: inline-block;
         padding: 4px 0;
-        margin-bottom: 2px;
+        margin-block-end: 2px;
         text-decoration: none;
         &:hover {
           text-decoration: underline !important;
@@ -93,7 +93,7 @@
 
     .section-link {
       grid-column: 1 / -1;
-      margin-bottom: 16px;
+      margin-block-end: 16px;
       line-height: 18px;
       font-size: 16px;
       display: inline-block;
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte b/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
index 37f9d568..676a6846 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
@@ -78,12 +78,12 @@
       }
 
       &:first-child {
-        margin-right: 16px;
+        margin-inline-end: 16px;
       }
 
       @include for-tablet-down {
         &:nth-child(2) {
-          margin-top: 0;
+          margin-block-start: 0;
         }
       }
     }
@@ -94,7 +94,7 @@
     font-weight: 400;
     display: inline-block;
     padding: 4px 0;
-    margin-bottom: 2px;
+    margin-block-end: 2px;
     font-family: var(--theme-font-family-sans-serif);
     &:hover {
       text-decoration: underline;
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte b/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte
index 686c1dd6..8496750a 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte
@@ -50,7 +50,7 @@
     }
 
     .story-text {
-      margin-right: 10px;
+      margin-inline-end: 10px;
       width: 100%;
       &.has-thumbnail {
         width: calc(100% - 84px);
@@ -68,7 +68,7 @@
 
       time {
         @include font-sans;
-        margin-top: 8px;
+        margin-block-start: 8px;
         display: block;
         font-size: 12px;
         font-weight: 400;