update figure structure

Author: gasparnagy

_includes/figure.html

@@ -1,6 +1,6 @@
-<figure class="wp-block-image aligncenter size-medium">
+<figure class="document-figure aligncenter">
   <img decoding="async" src="{{ site.url }}{{ include.url }}" alt="{{ include.alt }}" style="{{ include.style }}"  />
   {%- if include.description -%}
-  <figcaption class="wp-element-caption">{{ include.description }}</figcaption>
+  <figcaption>{{ include.description }}</figcaption>
   {%- endif -%}      
 </figure>

_sass/common.scss

@@ -98,6 +98,10 @@
   }
 }
 
+.aligncenter {
+  clear: both
+}
+
 .separator {
   white-space: pre-wrap
 }

_sass/legacy1.scss

@@ -776,10 +776,6 @@ ul {
     display: none
 }
 
-.aligncenter {
-    clear: both
-}
-
 .items-justified-left {
     justify-content: flex-start
 }

_sass/structure.scss

@@ -136,6 +136,32 @@ body {
   }
 }
 
+.document-figure {
+
+  display: table;
+
+  &.aligncenter {
+    text-align: center;
+  }
+
+  img {
+    box-sizing: border-box;
+    height: auto;
+    max-width: 100%;
+    vertical-align: bottom;
+  }
+
+  figcaption {
+    caption-side: bottom;
+    display: table-caption;
+    color: #555;
+    font-size: 13px;
+    text-align: center;
+    margin-bottom: 1em;
+    margin-top: 0.5em;
+  }
+}
+
 /* overrides for content types */
 
 .post {