diff --git a/sass/_guardians.scss b/sass/_guardians.scss
index 4a00a1b99..3178f122a 100644
--- a/sass/_guardians.scss
+++ b/sass/_guardians.scss
@@ -1,24 +1,24 @@
 .guardian {
     display: flex;
-    flex-direction: row;
-    margin-bottom: 20px;
+    align-items: flex-start;
+    margin: 2.5em 0;
 
     img {
         width: 128px;
-        height: 128px;
-        min-width: 128px;
-        min-height: 128px;
-        border-radius: 128px;
-        margin: 20px;
-    }
-}
+        max-width: 25vw;
+        border-radius: 100%;
 
-.guardian-details {
-    display: flex;
-    flex-direction: column;
+        &:first-child {
+            margin-right: 20px;
+        }
+
+        &:last-child {
+            margin-left: 20px;
+        }
+    }
 }
 
 .guardian-name {
     font-weight: bold;
-    margin: 0px;
+    margin: 0 0 .5rem;
 }
diff --git a/templates/shortcodes/guardians.html b/templates/shortcodes/guardians.html
index 2b097b5e9..e368dcc58 100644
--- a/templates/shortcodes/guardians.html
+++ b/templates/shortcodes/guardians.html
@@ -1,20 +1,20 @@
 <div>
     {% set guardians_data = load_data(path="content/about/guardians.toml") %}
     {% for guardian in guardians_data.guardians %}
-        <div class="guardian">
-            {% if loop.index % 2 == 0 %}
-            <div class="guardian-details">
-                <h4 class="guardian-name">{{ guardian.name }}</h4>
-                <p>{{ guardian.bio }}</p>
-            </div>
-            <img src="/about/{{ guardian.picture }}" alt="Mugshot of {{ guardian.name }}" />
-            {% else %}
-            <img src="/about/{{ guardian.picture }}" alt="Mugshot of {{ guardian.name }}" />
-            <div class="guardian-details">
-                <h4 class="guardian-name">{{ guardian.name }}</h4>
-                <p>{{ guardian.bio }}</p>
-            </div>
-            {% endif %}
+    <div class="guardian">
+        {% if loop.index % 2 == 0 %}
+        <div class="guardian-details">
+            <h4 class="guardian-name">{{ guardian.name }}</h4>
+            <p>{{ guardian.bio }}</p>
         </div>
+        <img src="/about/{{ guardian.picture }}" alt="Mugshot of {{ guardian.name }}" />
+        {% else %}
+        <img src="/about/{{ guardian.picture }}" alt="Mugshot of {{ guardian.name }}" />
+        <div>
+            <h4 class="guardian-name">{{ guardian.name }}</h4>
+            <p>{{ guardian.bio }}</p>
+        </div>
+        {% endif %}
+    </div>
     {% endfor %}
 </div>