First commit.

sass/base/embedded/_embedded.scss

@@ -0,0 +1,46 @@
+// Embedded content
+//
+// Weight: 2
+//
+// Style guide: base.embedded
+
+// Image
+//
+// An `<img>` element represents an image.
+//
+// Markup: embedded-img.twig
+//
+// Style guide: base.embedded.img
+
+img {
+  // Remove the border on images inside links in IE <11.
+  border-style: none;
+  @if support-for(ie, 7) {
+    // Improve image quality when scaled in IE 7.
+    // sass-lint:disable no-vendor-prefixes
+    -ms-interpolation-mode: bicubic;
+  }
+}
+
+img,
+svg {
+  // Suppress the space beneath the baseline
+  // vertical-align: bottom;
+
+  // Responsive images
+  max-width: 100%;
+  height: auto;
+}
+
+// Scalable vector
+//
+// A `<svg>` element represents an image encoded as a Scalable Vector Graphic.
+//
+// Markup: embedded-svg.twig
+//
+// Style guide: base.embedded.svg
+
+svg:not(:root) {
+  // Hide the overflow in IE.
+  overflow: hidden;
+}

sass/base/embedded/embedded-img.twig

@@ -0,0 +1,6 @@
+<p>An image <img class="{{modifier_class}}" src="kss-assets/sample-inline.png"> that is inline with other text.</p>
+
+<figure style="width: 50%; max-width: 300px;">
+  <figcaption>An image inside a figure.</figcaption>
+  <img class="{{modifier_class}}" src="kss-assets/sample.png">
+</figure>

sass/base/embedded/embedded-svg.twig

@@ -0,0 +1,8 @@
+<p>A svg image <svg class="{{modifier_class}}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08   29.274,197.007 188.165,173.919 "/></svg> that is inline with other text.</p>
+
+<figure style="width: 50%; max-width: 300px;">
+  <figcaption>A svg inside a figure.</figcaption>
+  <svg class="{{modifier_class}}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+  <polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08   29.274,197.007 188.165,173.919 "/>
+  </svg>
+</figure>