<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ops="http://www.idpf.org/2007/ops" xml:lang="en">
<head>
<title></title>
<style>
@page {
  size: 9cm 12cm;
  margin: 1mm;
}
.illustration {
  page-break-inside: avoid;
  page-break-before: always;
  page-break-after: always;
  text-align: center;
  text-indent: 0;
  margin: 0;
}
img {
  max-width: 88mm;
  max-height: 100%;
}
.illustration .caption {
  font-style: italic;
}
.fullpage {
  height: 118mm;
  width: 100%;
  text-align: center;
}
@supports (display: grid) {
  .illustration {
    display: grid;
    grid-template: "image" minmax(0,max-content) "caption" min-content;
    grid-row-gap: 0.5em;
    height: 118mm;
    width: 100%;
    margin: 0em auto;
    box-sizing: border-box;
  }
  .illustration .image {
    display: block;
    grid-area: image;
  }
  .illustration .caption {
    display: block;
    grid-area: caption;
  }
}
@supports (display: flex) {
  .illustration {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 118mm;
    width: 100%;
    box-sizing: border-box;
  }
  .illustration .image {
    min-height: 1em;
    flex-shrink: 1;
    flex-grow: 0;
  }
  .illustration .caption {
    flex-shrink: 0;
    flex-grow: 1;
  }
}
</style>
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<div class="illustration">
<span class="image"><img src="xfinal-1-760x1024.jpg.pagespeed.ic.xtQ1opfcsy.jpg" alt=""/></span>
<span class="caption">Donec eu ex non dolor ornare tristique. Phasellus orci leo, auctor nec interdum quis, bibendum eu lacus. Integer erat nibh, gravida id varius id, pharetra sed nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum nulla mi, faucibus et tortor viverra, euismod fringilla mi.</span>
</div>

<div class="illustration">
<span class="image"><img src="xfinal-1-760x1024.jpg.pagespeed.ic.xtQ1opfcsy.jpg" alt=""/></span>
<span class="caption">Duis lorem nibh, convallis at ante quis, facilisis mollis lectus. Sed dignissim mauris ac mi dictum sodales. Nulla tincidunt orci iaculis mi mollis congue. Suspendisse et imperdiet mi. Vivamus mi justo, accumsan hendrerit egestas id, posuere vel turpis. Cras ac ipsum nunc. Proin pellentesque ex ac scelerisque egestas. Morbi ac elit at lectus vestibulum ultrices eget id dui. Proin facilisis tortor vel vehicula rutrum. Nunc euismod, nulla in elementum elementum, arcu nunc placerat quam, fermentum accumsan mauris est eu erat.</span>
</div>

<div class="fullpage">
<img src="xfinal-1-760x1024.jpg.pagespeed.ic.xtQ1opfcsy.jpg" alt=""/>
</div>

</body>
</html>
