fix: safari rendering inconsistencies with polaroid border compared to other browsers

src/components/Figure.vue

@@ -26,7 +26,7 @@
       </template>
 
       <figcaption class="figure__meta">
-        <template v-if="!nsfw">
+        <template v-if="!nsfw || $root.nsfw">
           <div class="caption">
             <slot name="caption"></slot>
           </div>
@@ -72,6 +72,10 @@ export default {
   text-align: center;
 
   &__border {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+
     margin: auto;
 
     &--polaroid {
@@ -146,12 +150,11 @@ export default {
   }
 
   img {
-    width: 100%;
+    max-width: 100%;
     object-fit: contain;
 
     @include mq-desktop {
-      max-width: 70em;
-      max-height: 80vh;
+      max-height: 60vh;
     }
   }
 

src/components/Gallery.vue

@@ -146,19 +146,8 @@ export default {
       max-height: 80%;
     }
 
-    img {
-      object-fit: contain;
-
-      width: 100%;
-      max-height: 50vh;
-
-      @include mq-desktop {
-        max-height: 80vh;
-      }
-    }
-
     figcaption {
-      flex: 1 0 auto;
+      flex: 0 0 100%;
       text-align: center;
 
       p {