Replace inline styles with custom css

sass/_utils.scss

@@ -17,3 +17,13 @@ figure.image > figcaption {
 .is-fullheight {
   height: 100%
 }
+
+.is-text-nowrap {
+  text-wrap: nowrap !important;
+}
+
+.author-images>figure {
+  margin-right: -1 * 20%;
+  // border: 1px solid white;
+  // border-radius: 100%;
+}

templates/blog/author_media.html

-<div class="columns">
-  <div class="column is-two-fifths">
+<div class="columns is-vcentered">
+  <div class="column is-two-fifths author-images">
 {% set authors_data = load_data(path="authors.json") -%}
 {% for author in post.authors -%}
-    <figure class="image is-48x48 is-inline-block" style="margin-right:  -30px;">
+    <figure class="image is-48x48 is-inline-block">
       {% set meta = get_image_metadata(path="authors/" ~ author ~ ".jpg", allow_missing=true) -%}
       {% if meta -%}
         {% set image = resize_image(path="authors/" ~ author ~ ".jpg", width=48, height=48) -%}
@@ -19,9 +19,7 @@
   <ul class="column is-three-fifths">
     <div class="title is-5">
 {% for author in post.authors -%}
-      <p class="is-inline">
-      {{ authors_data[author].display_name }}{% if not loop.last %},{% endif %}
-      </p>
+      <span class="is-text-nowrap">{{ authors_data[author].display_name }}</span>{% if not loop.last %},{% endif %}
 {% endfor %}
     </div>
   </ul>