hi @jotasenati
i checked your playground demo and i think i found the issue, it is related to how the grid system in bootstrap works and how that translates to the printing layout, you have this code that prints the images
<div class="row margin-top5 align-items-center border-left border-right border-bottom" style="break-inside: avoid !important;">
<div class="col-md-12 text-left border pt-2 pb-1" style="margin-bottom: 2%">
<!--<label class="label">Imagens</label>-->
<h5>Relatório Fotográfico</h5>
</div>
{{#each AnexosImagens}}
<div class="col-md-6 text-center p-1" style="break-inside: avoid !important;">
<div class="unbreakable" style="break-inside: avoid !important;">
<img src="{{Arquivo}}" width="50%" border="0" class="uImage imgs rotarion{{Orientation}}" style="break-inside: avoid !important;"/>
<br/>
<label style="margin-top: 2%">{{TituloAtividade}}
<br/>
{{Descricao}}</label>
</div>
</div>
{{/each}}
</div>
which basically puts lots of .col elements (produced by the #each block) inside single .row parent, this is probably ok to do when using bootstrap to layout web pages, however when this translates to print layout it does not work with the .unbreakable (page-break-inside: avoid rule).
you need to change your code to print each two .cols (images) elements inside a single .row element, so the end result is something like this.
<div class="row margin-top5 align-items-center border-left border-right border-bottom">
<div class="col-md-12 text-left border pt-2 pb-1" style="margin-bottom: 2%">
<!--<label class="label">Imagens</label>-->
<h5>Relatório Fotográfico</h5>
</div>
<div class="cold-md-12">
<div class="row">
<div class="col-md-6 text-center p-1">
<div class="unbreakable">
<img src="https://asset.barrons.com/public/resources/images/ON-CQ379_CoverI_B620_20180817201557.jpg" border="0" class="uImage imgs rotarion"/>
<br/>
<label style="margin-top: 2%">Titulo Atividade 1
<br/>
4016x3007.jpg</label>
</div>
</div>
<div class="col-md-6 text-center p-1">
<div class="unbreakable">
<img src="https://asset.barrons.com/public/resources/images/ON-CQ379_CoverI_B620_20180817201557.jpg" border="0" class="uImage imgs rotarion"/>
<br/>
<label style="margin-top: 2%">Titulo Atividade 1
<br/>
4016x3007.jpg</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 text-center p-1">
<div class="unbreakable">
<img src="https://asset.barrons.com/public/resources/images/ON-CQ379_CoverI_B620_20180817201557.jpg" border="0" class="uImage imgs rotarion"/>
<br/>
<label style="margin-top: 2%">Titulo Atividade 1
<br/>
4016x3007.jpg</label>
</div>
</div>
<div class="col-md-6 text-center p-1">
<div class="unbreakable">
<img src="https://asset.barrons.com/public/resources/images/ON-CQ379_CoverI_B620_20180817201557.jpg" border="0" class="uImage imgs rotarion"/>
<br/>
<label style="margin-top: 2%">Titulo Atividade 1
<br/>
4016x3007.jpg</label>
</div>
</div>
</div>
</div>
</div>
i am just showing you how the end html should look like for your layout to work and the .unbreakable to have effect, you still need to adapt this html into handlebars according to your data.
you can see a live example of this html here -> https://playground.jsreport.net/w/anon/wexaJlQV
of course in that demo there is other issue that the rows overflows the borders (left/right) however i think that should be fixable, just that i don't have too much experience with the new bootstrap grid system.
