Media
Use .pow-media-[xs-sm-md-lg-xl] class to create a container sized
<div class="pow-media-xs">
<img alt="" src="https://via.placeholder.com/68x68">
</div>
<div class="pow-media-sm">
<img alt="" src="https://via.placeholder.com/80x80">
</div>
<div class="pow-media-md">
<img alt="" src="https://via.placeholder.com/136x136">
</div>
<div class="pow-media-lg">
<img alt="" src="https://via.placeholder.com/192x192">
</div>
<div class="pow-media-xl">
<img alt="" src="https://via.placeholder.com/264x264">
</div>
Use .pow-media-full.ratio-1-1 class to create a container with ratio 1/1
Use .pow-media-full.ratio-16-9 class to create a container with ratio 16/9
<div class="pow-media-full ratio-1-1">
<img alt="" src="https://via.placeholder.com/10x10">
</div>
<div class="pow-media-full ratio-16-9">
<img alt="" src="https://via.placeholder.com/16x9">
</div>
Use .pow-media-overlay class to get a container with height: 95px;
Use .pow-media-banner-large class to get a container with width: 100% and height: 250px;
Use .pow-media-cards-large class to have a container with width: 100% and height: 160px;
Use .pow-media-cards-horizontal class to have a container with width: 170px and height: 150px;
<div class="pow-media-overlay">
<img alt="" src="https://via.placeholder.com/400x95">
</div>
<div class="pow-media-banner-large">
<img alt="" src="https://via.placeholder.com/400x250">
</div>
<div class="pow-media-cards-large">
<img alt="" src="https://via.placeholder.com/400x160">
</div>
<div class="pow-media-cards-horizontal">
<img alt="" src="https://via.placeholder.com/170x150">
</div>
Icons
<div class="pow-icon-container-xs pdf"></div>
<div class="pow-icon-container-sm pdf"></div>
<div class="pow-icon-container-md pdf"></div>
<div class="pow-icon-container-lg pdf"></div>