Here it is - ugly coding since I'm new to this and inherit the code from Indesign:
<figure class="wrapper">
<figcaption class="caption"><p class="ImageCaptionCentered"><span class="Semi-Bold">Original Photos</span></p></figcaption>
<div class="_idGenObjectLayout-4">
<div id="_idContainer463" class="MainImage">
<img alt="" src="image/84-4.jpg" />
</div>
</div>
</figure>
<figure class="wrapper">
<figcaption class="caption"><p class="ImageCaptionCentered"><span class="Semi-Bold">Virtual Copies</span></p></figcaption>
<div class="_idGenObjectLayout-4">
<div id="_idContainer463" class="MainImage">
<img alt="" src="image/84-5.jpg" />
</div>
</div>
</figure>
<figure class="wrapper">
<figcaption class="caption"><p class="ImageCaptionCentered"><span class="Semi-Bold">Videos</span></p></figcaption>
<div class="_idGenObjectLayout-4">
<div id="_idContainer463" class="MainImage">
<img alt="" src="image/84-6.jpg" />
</div>
</div>
</figure>
________________________________________
CSS
/* image wrapper for captions */
.wrapper {
float: left;
width: 100%;
text-align: center;
-webkit-column-break-inside: avoid !important;
page-break-inside: avoid !important;
break-inside: avoid !important;
}
.wrapper img {
width: 100%; /* or the width you wish */
display: block;
}
.caption {
font-size: 1rem; /* or the size you wish */
font-style: italic; /* ad libitum
*/
}
div._idGenObjectLayout-4 {
text-align:center;
-webkit-column-break-inside: avoid !important; /* for webkit ereaders */
break-inside: avoid !important; /* for the rest of ereaders */
#_idContainer463 {
display:inline-block;
width:23.72%;
div.MainImage {
border-style:solid;
box-shadow: 14px 14px 10px rgba(0, 0, 0, 0.6);
margin-bottom:0.5em;
max-width: 99%;
max-height: 99%;
}