diff --git a/themes/mg/static/css/articles.css b/themes/mg/static/css/articles.css
index 1211345..25711c4 100644
--- a/themes/mg/static/css/articles.css
+++ b/themes/mg/static/css/articles.css
@@ -4,15 +4,46 @@
 
 }
 
+
 /* Article Listing */
 
 .article-listing {
   margin-top: 2rem;
   background: var(--color-background-2);
   border-radius: 4px;
-  box-shadow: 0 0.25rem 0.5rem -0.25rem var(--color-shadow-default);
-  border: 1px solid var(--color-keyline-default);
-  padding: 1.8rem 2rem;
+  padding: 1.8rem 0;
+}
+
+.article-listing *:not(.article-listing * *) {
+  display: block;
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.article-listing .article-image {
+  float: right;
+  height: 100px;
+  margin: 1rem;
+  border-bottom: 0 solid transparent;
+}
+
+@media all and (max-width: 767px) {
+  .article-listing .article-image {
+    width: 100%;
+    height: auto;
+    border-bottom: 1px solid var(--color-keyline-default);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 0 1rem;
+    padding: 0 0 1.8rem;
+    border-radius: inherit;
+  }
+
+  .article-listing .article-image img {
+    max-height: 14em;
+    width: auto;
+  }
 }
 
 .article-listing > * {
diff --git a/themes/mg/static/css/main.css b/themes/mg/static/css/main.css
index 9daca58..93dd381 100644
--- a/themes/mg/static/css/main.css
+++ b/themes/mg/static/css/main.css
@@ -10,28 +10,31 @@
 
 :root {
   /* --color-brand-primary: #059962; */
-  --color-brand-primary: hsl(158,94%,31%);
+  --color-brand-primary: hsl(158, 94%, 31%);
   --color-brand-secondary: #0d544e;
 
-  --color-background-default: hsl(0,0%,98%);
-  --color-background-2: hsl(0,0%,100%);
-  --color-background-3: hsl(0,0%,94%);
+  --color-background-default: hsl(0, 0%, 98%);
+  --color-background-2: hsl(0, 0%, 100%);
+  --color-background-3: hsl(0, 0%, 94%);
 
-  --color-content-default: rgba(0,0,0,0.7);
-  --color-content-contrast: rgba(0,0,0,1);
-  --color-content-muted: rgba(0,0,0,0.6);
-  --color-content-nonessential: rgba(0,0,0,0.4);
+  --color-content-default: rgba(0, 0, 0, 0.7);
+  --color-content-contrast: rgba(0, 0, 0, 1);
+  --color-content-muted: rgba(0, 0, 0, 0.6);
+  --color-content-nonessential: rgba(0, 0, 0, 0.4);
 
   --color-intent-highlight: var(--color-brand-primary);
   --color-special-rss: hsl(24, 50%, 100%);
 
-  --color-keyline-default: hsla(0,0%,0%,4%);
-  --color-shadow-default: hsla(0,0%,0%,4%);
+  --color-keyline-default: hsla(0, 0%, 0%, 4%);
+  --color-shadow-default: hsla(0, 0%, 0%, 4%);
 
-  --font-stack-default: system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
-  --font-stack-brand: Optima,Segoe,Segoe UI,Candara,Calibri,Arial,sans-serif;
-  --font-stack-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`;
-  --font-stack-code: Consolas,monospace,serif;
+  --font-stack-default: system-ui, "Helvetica Neue", Helvetica, Arial,
+    sans-serif;
+  --font-stack-brand: Optima, Segoe, Segoe UI, Candara, Calibri, Arial,
+    sans-serif;
+  --font-stack-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
+    Courier, monospace`;
+  --font-stack-code: Consolas, monospace, serif;
 
   --letter-spacing-default: normal;
 
@@ -51,11 +54,11 @@
   --font-size-text-xs: 10px;
 
   --font-size-page-title: 40px;
-  
+
   --font-size-heading-lg: 38px;
   --font-size-heading-default: 36px;
   --font-size-heading-sm: 32px;
-  
+
   --font-size-subheading-sm: 20px;
   --font-size-subheading-default: 18px;
   --font-size-subheading-lg: 16px;
@@ -67,27 +70,26 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-background-default: hsl(158,10%,5%);
-    --color-background-2: hsl(158,10%,7%);
-    --color-background-3: hsl(158,10%,11%);
+    --color-background-default: hsl(158, 10%, 5%);
+    --color-background-2: hsl(158, 10%, 8%);
+    --color-background-3: hsl(158, 10%, 12%);
 
-    --color-content-default: hsla(0,0%,100%, 0.7);
-    --color-content-contrast: hsla(0,0%,100%, 0.9);
+    --color-content-default: hsla(0, 0%, 100%, 0.7);
+    --color-content-contrast: hsla(0, 0%, 100%, 0.9);
     --color-content-muted: hsla(0, 0%, 100%, 0.55);
     --color-content-nonessential: hsla(0, 0%, 100%, 0.4);
 
-    --color-keyline-default: hsla(0,0%,100%,6%);
+    --color-keyline-default: hsla(0, 0%, 100%, 6%);
     --color-shadow-default: transparent;
 
     --letter-spacing-default: normal;
   }
 }
 
-
-
 /* Base style */
 
-html, body {
+html,
+body {
   background: var(--color-background-default);
   color: var(--color-content-default);
   font-weight: var(--font-weight-default);
@@ -97,7 +99,8 @@ html, body {
   letter-spacing: var(--letter-spacing-default);
 }
 
-html, body {
+html,
+body {
   margin: 0;
   padding: 0;
   min-height: 100vh;
@@ -134,7 +137,12 @@ a:hover {
   color: var(--color-intent-highlight);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   color: inherit;
   font-family: var(--font-stack-brand);
   font-weight: var(--font-weight-semibold);
@@ -155,4 +163,4 @@ pre {
   background-color: var(--color-background-3);
   color: var(--color-content-default);
   font-family: var(--font-stack-code);
-}
\ No newline at end of file
+}
diff --git a/themes/mg/templates/article-listing.html b/themes/mg/templates/article-listing.html
index 407bb5e..bc014a3 100644
--- a/themes/mg/templates/article-listing.html
+++ b/themes/mg/templates/article-listing.html
@@ -1,11 +1,17 @@
-<article class="uk-article article-listing" itemtype="http://schema.org/BlogPosting" itemscope="itemscope" itemprop="blogPost">
-  {% if  article.featured_image %}
-    <img src="{{ article.featured_image }}" style="float:right; height:100px;">
+<article class="uk-article article-listing" itemtype="http://schema.org/BlogPosting" itemscope="itemscope"
+  itemprop="blogPost">
+  {% if article.featured_image %}
+  <figure class="article-image">
+    <img src="{{ article.featured_image }}" />
+  </figure>
   {% endif %}
   <a href="{{ SITEURL }}/{{ article.url }}" class="article-title" itemprop="name">{{ article.title }}</a>
   <p class="uk-article-lead article-lead" itemprop="description">{{ article.summary|striptags }}</p>
   <p class="uk-article-meta">
     {% if article.author %}<span class="uk-author">{{ article.author }}</span> • {% endif %}
-    <time datetime="{{ article.date.strftime('%Y-%m-%d') }}" itemprop="datePublished">{{ article.locale_date }}</time> in <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>{% if DISQUS_SITENAME %} • <br class="uk-visible-small"> <a href="{{ SITEURL }}/{{ article.url }}#disqus_thread" itemprop="discussionUrl"></a>{% endif %}
+    <time datetime="{{ article.date.strftime('%Y-%m-%d') }}" itemprop="datePublished">{{ article.locale_date }}</time>
+    in <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>{% if DISQUS_SITENAME %} • <br
+      class="uk-visible-small"> <a href="{{ SITEURL }}/{{ article.url }}#disqus_thread"
+      itemprop="discussionUrl"></a>{% endif %}
   </p>
 </article>
\ No newline at end of file