diff --git a/_includes/embed_image.html b/_includes/embed_image.html
index ea1cea3..bb6dce4 100644
--- a/_includes/embed_image.html
+++ b/_includes/embed_image.html
@@ -6,41 +6,71 @@
 {% endcomment %}
 
 {%- assign img-style = false -%}
-{%- assign img-link = false -%}
+{%- assign img-src   = false -%}
+{%- assign img-link  = false -%}
+{%- assign display-mode  = false -%}
 
 {%- if include.width or include.height -%}
     {%- assign img-style = true -%}
 {%- endif -%}
 
-{%- if include.link -%}
-    {%- assign img-link = include.link -%}
-{%- elsif include.thumbnail == "true" -%}
-    {%- capture img-link -%}{{ site.baseurl }}/{{ include.url }}{%- endcapture -%}
-{%- endif -%}
 {% comment %}
+    For links that begin with http, they are used as-is. Other links are assumed to be
+    internal and are parsed with the url filter.
+
     If the link parameter is used, the URL will be set to its contents. If the
     thumbnail parameter has been used, the URL will automatically be set to the original
     image. Otherwise, no link will be generated for the image.
 {% endcomment %}
 
-{% if include.caption %}
-<figure class="image-figure {% if include.thumbnail == "true" %} thumbnail{%- endif -%}">
+{%- assign downcase-src = include.src | downcase -%}
+{%- if downcase-src contains "http" -%}
+    {%- assign img-src = downcase-src -%}
+{%- else -%}
+    {% assign img-src = downcase-src | relative_url %}
 {%- endif -%}
+
+{%- if include.link -%}
+    {%- assign downcase-link = include.link | downcase -%}
+    {%- if downcase-link contains "http" -%}
+        {%- assign img-link = downcase-link -%}
+    {%- else -%}
+        {% assign img-link = downcase-link | relative_url %}
+    {%- endif -%}
+{%- elsif include.mode == "thumbnail" or include.mode == "gallery" -%}
+    {%- assign img-link = img-src -%}
+    {%- assign display-mode = {{include.mode}} -%}
+{%- endif -%}
+
+<div class="image-figure-wrap {%- if display-mode %} {{display-mode}}{%- endif -%}">
+
+    <figure class="image-figure {% if include.caption %}captioned{%- endif -%}">
 {%- if img-link -%}
-    <a href="{{- img-link -}}">
+        <a href="{{- img-link -}}">
 {%- endif -%}
-        <img
-            src="{{ site.baseurl }}/{{ include.url }}"
-            alt="{%- if include.alt -%}{{- include.alt -}}{%- else -%}WARNING: ALT TEXT NOT FOUND{%- endif -%}"
-            class="content-image-figure"
-            {%- if img-style == true %}
-                style="{%- if include.width -%}width: {{- include.width -}};{%- endif -%}{%- if include.height -%}height: {{- include.height -}};{%- endif -%}"
-            {% endif -%}
-        >
+            <img
+                src="{{- img-src -}}"
+                alt="{%- if include.alt -%}{{- include.alt -}}{%- else -%}WARNING: ALT TEXT NOT FOUND{%- endif -%}"
+                class="content-image-figure"
+                {%- if img-style == true %}
+                    style="{%- if include.width -%}width: {{- include.width -}};{%- endif -%}{%- if include.height -%}height: {{- include.height -}};{%- endif -%}"
+                {% endif -%}
+            >
 {%- if img-link -%}
-    </a>
+        </a>
 {%- endif -%}
+
 {% if include.caption %}
-    <figcaption class="image-caption">{{-include.caption-}}</figcaption>
-</figure>
-{%- endif -%}
\ No newline at end of file
+        <figcaption class="image-caption">
+{%- if img-link -%}
+            <a href="{{- img-link -}}">
+{%- endif -%}
+                {{-include.caption-}}
+{%- if img-link -%}
+            </a>
+{%- endif -%}  
+        </figcaption>
+{%- endif -%}
+
+    </figure>
+</div>
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
index 6cea86f..2a6f534 100644
--- a/_sass/custom/custom.scss
+++ b/_sass/custom/custom.scss
@@ -94,7 +94,7 @@ ul.nav-list .nav-list-item .nav-list-link {
 .main-content h1 {
     font-size: 2.8em !important;
     font-weight: 400;
-    clear: right; // keeps border line from overlapping floating images
+    clear: both; // keeps border line from overlapping floating images
     color: $adaptation-purple;
 }
 
@@ -115,24 +115,49 @@ ul.nav-list .nav-list-item .nav-list-link {
 }
 
 .main-content {
-
-    figure {
+    div.image-figure-wrap {
         padding: 0;
+      }
+    
+    figure.captioned {
         background-color: $adaptation-tan;
+    }
 
+    figure {
+        padding: 0;
+        
+        img {
+            height: 100%;
+            width: 100%;
+            object-fit: contain;
+          }
+        
         figcaption {
             padding: 0 0.4rem 0.4rem 0.4rem;
             font-size: 0.9rem;
             line-height: 0.9;
+            color: $blue-dark;
+  
+            a {
+              text-decoration: none;
+              color: $blue-dark;
+  
+              &:hover {
+                text-decoration: underline;
+              }
+            }
         }
     }
-    
+}
+
 
+p.note-title > p:first-child, blockquote.note-title > p:first-child {
+	font-size: 0.9rem;
 }
 
 hr {
     background-color: $adaptation-tan;
-    clear: right; // clear floating images
+    clear: both; // clear floating images
 }
 
 footer {
@@ -145,18 +170,20 @@ footer {
     width: calc(33% - 1rem);
 }
 
-.clear-right {
-    clear: right;
+.gallery {
+    float: left;
+    margin: 0.5rem 0.5rem 0.5rem 0;
+    width: calc(33% - 1rem);
 }
 
 blockquote, p.note, p.warning, p.important, p.idea {
-    clear: right;           // callouts will appear below floating photos, like h1 and h2
+    clear: both;           // callouts will appear below floating photos, like h1 and h2
     border-radius: unset;   // match goingtoseed.org
     box-shadow: unset;      // match goingtoseed.org
 }
 
 div.language-plaintext {
-    clear: right;
+    clear: both;
 }
 
 // Print-only styles.