adjust figcaption responsive styling

vue-theme/src/pages/single.vue

         .wp-block-gallery
             margin: 0 0 0.5em 0
             grid-gap: $ms--5
-            
-            > .wp-block-image     
+            > .wp-block-image  
                 figcaption
                     position: inherit
                     background: none
+                    font-size: $ms--1
                     color: $cia_black
-                    max-height: 5%
+                    max-height: 9%
                     overflow: visible 
                     padding: 0 
-                    margin-bottom: $ms-0
+                    margin-bottom: 2.5em
+            figcaption
+                flex-direction: column
 
         /* iframe container 16:9 */
         [class^="iframe-container"]
             flex-direction: row
             .wp-block-embed, .is-type-video
                 margin-bottom: $ms-9
+            .wp-block-gallery
+                .wp-block-image  
+                    figcaption
+                        max-height: 5%
+                        margin-bottom: $ms-4            
 </style>