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>