More use of start/end for paddings and margins.

assets/sass/_zen.scss

@@ -102,20 +102,24 @@ article {
 figure,
 img {
   &.image {
+    --padding: .75rem;
+
     @include respond-to(s) {
       &.center {
         margin-inline: auto;
       }
 
       &.left {
-        padding: 0 .75rem .75rem 0;
+        padding-inline-end: var(--padding);
+        padding-block-end: var(--padding);
         margin: 0;
         float: left;
         clear: both;
       }
 
       &.right {
-        padding: 0 0 .75rem .75rem;
+        padding-inline-start: var(--padding);
+        padding-block-end: var(--padding);
         margin: 0;
         float: right;
         clear: both;
@@ -126,10 +130,15 @@ img {
 
 figure {
   &.image {
+    --padding: .75rem;
+
     figcaption {
+      padding-block-start: var(--padding);
+
       @include respond-to(s) {
         display: table-caption;
         caption-side: bottom;
+        padding-block-start: 0;
       }
 
       p {
@@ -140,19 +149,17 @@ figure {
     @include respond-to(s) {
       display: table;
 
-      img {
-        display: block;
-      }
-
       &.left {
         figcaption {
-          padding: 0 .75rem .75rem 0;
+          padding-inline-end: var(--padding);
+          padding-block-end: var(--padding);
         }
       }
 
       &.right {
         figcaption {
-          padding: 0 0 .75rem .75rem;
+          padding-inline-start: var(--padding);
+          padding-block-end: var(--padding);
         }
       }
     }

assets/sass/base/grouping/_grouping.scss

@@ -28,21 +28,15 @@ menu {
 }
 
 dd {
-  margin: 0 0 0 var(--indent-amount);
+  margin: 0;
-
+  margin-inline-start: var(--indent-amount);
-  @include rtl {
-    margin: 0 var(--indent-amount) 0 0;
-  }
 }
 
 ol,
 ul,
 menu {
-  padding: 0 0 0 var(--indent-amount);
+  padding: 0;
-
+  padding-inline-start: var(--indent-amount);
-  @include rtl {
-    padding: 0 var(--indent-amount) 0 0;
-  }
 
   // Turn off margins on nested lists.
   ol,

assets/sass/components/header/_header.scss

@@ -45,12 +45,7 @@
   // Wrapper for any blocks placed in the header region.
   &__region {
     @include respond-to(s) {
-      margin-left: auto;
+      margin-inline-start: auto;
-
-      @include rtl() {
-        margin-right: auto;
-        margin-left: 0;
-      }
     }
   }
 }

assets/sass/components/language-selector/_language-selector.scss

@@ -5,11 +5,6 @@
 }
 
 .language-icon {
-  @include margin-right(.5);
+  @include margin-inline-end(.5);
   fill: var(--color-text);
-
-  @include rtl() {
-    @include margin-left(.5);
-    margin-right: 0;
-  }
 }

assets/sass/mixins/rtl/_rtl.scss

@@ -4,18 +4,16 @@ $include-rtl: true !default;
 
 // rtl()
 //
-// Includes Right-To-Left language support by adding a parent selector of
+// Includes Right-To-Left language support by adding a selector of
-// `[dir="rtl"]`. Since the dir attribute is usually defined on the html element
+// `[dir="rtl"]`.
-// of a page, using this mixin on a ruleset that matches the html element won't
-// work.
 //
 // Can be turned off globally by setting `$include-rtl: false;`.
 //
-// $selector = '[dir="rtl"]' - The RTL parent selector.
+// $selector = ':dir(rtl)' - The RTL selector.
-@mixin rtl($selector: '[dir="rtl"]') {
+@mixin rtl($selector: ':dir(rtl)') {
   @if $include-rtl {
     @if & {
-      #{$selector} & {
+       &#{$selector} {
         @content;
       }
     }