Aspect Ratio

<style>
    .aspect-example__inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 45.7px;
        font-family: Roboto Mono Web, Bitstream Vera Sans Mono, Consolas, Courier, monospace;
    }
</style>

<p>
    Aspect ratios are helpful for dealing with responsive media. Also available via a <code>add-aspect()</code> mixin.
</p>

<div class="add-aspect-9x16 aspect-example bg-primary-lighter margin-y-7">
    <div class="aspect-example__inner">
        9x16
    </div>
</div>
<div class="add-aspect-16x9 bg-primary-lighter margin-y-7">
    <div class="aspect-example__inner">
        16x9
    </div>
</div>
<div class="add-aspect-1x1 bg-primary-lighter margin-y-7">
    <div class="aspect-example__inner">
        1x1
    </div>
</div>
<div class="add-aspect-4x3 bg-primary-lighter margin-y-7">
    <div class="aspect-example__inner">
        4x3
    </div>
</div>
<div class="add-aspect-2x1 bg-primary-lighter margin-y-7">
    <div class="aspect-example__inner">
        2x1
    </div>
</div>