Initial version

themes/zen/assets/sass/base/images/_images.scss

@@ -0,0 +1,82 @@
+// Figure and image.
+
+figure,
+img {
+  &.image {
+    --image-padding: .75rem;
+
+    @include respond-to(s) {
+      &.center {
+        margin-inline: auto;
+      }
+
+      &.left {
+        padding-inline-end: var(--image-padding);
+        padding-block-end: var(--image-padding);
+        margin: 0;
+        float: left;
+        clear: both;
+      }
+
+      &.right {
+        padding-inline-start: var(--image-padding);
+        padding-block-end: var(--image-padding);
+        margin: 0;
+        float: right;
+        clear: both;
+      }
+    }
+  }
+}
+
+figure {
+  // Add vertical rhythm margins.
+  @include margin-block(0 1);
+
+  &.image {
+    figcaption {
+      padding-block-start: var(--image-padding);
+
+      @include respond-to(s) {
+        display: table-caption;
+        caption-side: bottom;
+        padding-block-start: 0;
+      }
+
+      p {
+        margin: 0;
+      }
+    }
+
+    @include respond-to(s) {
+      display: table;
+
+      &.left {
+        figcaption {
+          padding-inline-end: var(--image-padding);
+          padding-block-end: var(--image-padding);
+        }
+      }
+
+      &.right {
+        figcaption {
+          padding-inline-start: var(--image-padding);
+          padding-block-end: var(--image-padding);
+        }
+      }
+    }
+  }
+
+  &.podcast {
+    audio {
+      width: 95%;
+    }
+  }
+}
+
+img {
+  &.image {
+    // Add vertical rhythm margins.
+    @include margin-block(0 1);
+  }
+}