Definition
Create ratio-bound content blocks, to keep media (e.g. images, videos) in their correct aspect ratios.
o-ratio
<div class="o-ratio">
<img class="o-ratio__content" src="https://dummyimage.com/1024x1024/e6e6e6/4d4d4d.jpg">
</div>
Ratio modifiers
The objects modifiers defines the different ratios
The object ratio by default is 1:1, but exist one modifier for each ratio foundation.
Also, the ratio could be applied from a media query, using the `@mq` notation, i.e. o-ratio--3:2@md
o-ratio > o-ratio--3:2
<div class="o-ratio o-ratio--3:2">
<img class="o-ratio__content" src="https://dummyimage.com/1024x672/fff7ed/c25e00.jpg">
</div>