add transparent source overlay not impacting image aspect ratio

sass/_utils.scss

@@ -4,11 +4,7 @@
 }
 
 .caption {
-  display: flex;
-  justify-content: center;
-  padding: 4px 10px 4px 10px;
-}
-
-.tag.caption {
-  width: 100%;
+  position: absolute;
+  opacity: 75%;
+  bottom: 0;
 }

templates/blog/post.html

@@ -11,15 +11,11 @@
     <div class="column is-one-quarter">
       <div class="card">
         <div class="card-image">
-          <figure>
+          <figure class="image is-4by3">
             {% set image = resize_image(path="@/" ~ post.colocated_path ~ "/" ~ post.extra.depiction.image, width=800, height=600) -%}
-            <div class="image is-4by3">
               <img src="{{ image.url }}" alt="{{ post.extra.depiction.alt }}" />
-            </div>
             {% if post.extra.depiction.credits %}
-            <div class="caption">
-              <figcaption class="tag is-rounded caption">{{ post.extra.depiction.credits }}</figcaption>
-            </div>
+              <figcaption class="tag has-text-white has-background-black  is-size-7 is-italic m-1 caption">{{ post.extra.depiction.credits }}</figcaption>
             {% endif %}
           </figure>
         </div>