Use block and inline intead of left, bottom etc.

assets/sass/_zen.scss

@@ -11,7 +11,7 @@ body {
 }
 
 .footer {
-  border-top: 2px solid var(--color-border);
+  border-block-start: 2px solid var(--color-border);
 }
 
 // Apply smaller text to blocks, footer etc.
@@ -100,11 +100,11 @@ article {
 // Navigation
 
 .main-menu {
-  margin-top: .75rem;
+  margin-block-start: .75rem;
   outline: 0;
 
   li {
-    margin-bottom: .75rem;
+    margin-block-end: .75rem;
     padding: 0;
   }
 

assets/sass/base/forms/_forms.scss

@@ -69,7 +69,7 @@ textarea {
 @include respond-to(s) {
   input:only-of-type {
     &:has(+ [type='submit']) {
-      margin-right: .5rem;
+      margin-inline-end: .5rem;
     }
   }
 }

assets/sass/components/box/_box.scss

@@ -65,7 +65,7 @@
     }
 
     &:last-child {
-      margin-bottom: 0;
+      margin-block-end: 0;
     }
   }
 }

assets/sass/components/button/_button.scss

@@ -21,8 +21,8 @@ button,
   text-decoration: none;
   text-align: center;
   width: fit-content;
-  margin-right: 1rem;
-  margin-bottom: 1rem;
+  margin-inline-end: 1rem;
+  margin-block-end: 1rem;
   padding: .2rem 1rem;
   // Improve usability and consistency of cursor style between image-type `input` and others.
   cursor: pointer;
@@ -46,8 +46,8 @@ button,
 %button {
   &--small {
     font-size: var(--fs-xs);
-    margin-right: .5rem;
-    margin-bottom: .5rem;
+    margin-inline-end: .5rem;
+    margin-block-end: .5rem;
     padding: .2rem .75rem;
   }
 

assets/sass/components/cards/_cards.scss

@@ -39,7 +39,7 @@
     }
 
     &:last-child {
-      margin-bottom: 0;
+      margin-block-end: 0;
     }
   }
 }

assets/sass/components/cookieconsent/_cookieconsent.scss

@@ -11,7 +11,7 @@
   padding-block-start: .5rem;
   color: var(--color-warning);
   background-color: var(--color-warning-bg);
-  border-top: 4px solid var(--color-warning-border);
+  border-block-start: 4px solid var(--color-warning-border);
   font-size: var(--fs-s);
   transform: translateY(100vh);
   transition: all 130ms ease-out;

assets/sass/components/divider/_divider.scss

@@ -7,7 +7,7 @@
   // Add vertical rhythm margins.
   @include margin-block(1);
   border: 0;
-  border-top: 1px solid var(--color-border);
+  border-block-start: 1px solid var(--color-border);
 
   // If used as a container, add a top margin to the first child.
   > :first-child {

assets/sass/components/responsive-video/_responsive-video.scss

@@ -12,8 +12,8 @@
   --aspect-ratio: 9 / 16; // 16:9 aspect ratio
 
   position: relative;
-  padding-bottom: calc(var(--aspect-ratio) * 100%); // 16:9 aspect ratio
-  padding-top: 25px; // Height of video controls
+  padding-block-end: calc(var(--aspect-ratio) * 100%); // 16:9 aspect ratio
+  padding-block-start: 25px; // Height of video controls
   height: 0;
 
   iframe {
@@ -22,8 +22,8 @@
 
   &__embed {
     position: absolute;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     width: 100%;
     height: 100%;
   }

assets/sass/mobile.scss

@@ -79,7 +79,7 @@
   &__hamburger {
     fill: var(--color-button-text);
     width: 1.6rem;
-    margin-left: .1rem;
+    margin-inline-start: .1rem;
 
     .button--outline & {
       fill: var(--color-button);
@@ -127,7 +127,7 @@
 
   &__region {
     &:not(:empty) {
-      margin-bottom: .5rem;
+      margin-block-end: .5rem;
     }
   }