Classes are named using the format:
-ar-{ratio} as default-ar-{breakpoint}-{ratio} apply to breakpoints greater than
small
<div class="-ar-14x5 -ar-medium-11x5 -ar-large-2x1"> ... </div>
| Aspect Ratio | Default | With Breakpoint |
|---|---|---|
| 1x1 | -ar-1x1 |
-ar-{breakpoint}-1x1 |
| 1x2 | -ar-1x2 |
-ar-{breakpoint}-1x2 |
| 2x1 | -ar-2x1 |
-ar-{breakpoint}-2x1 |
| 5x7 | -ar-5x7 |
-ar-{breakpoint}-5x7 |
| 5x11 | -ar-5x11 |
-ar-{breakpoint}-5x11 |
| 7x5 | -ar-7x5 |
-ar-{breakpoint}-7x5 |
| 9x16 | -ar-9x16 |
-ar-{breakpoint}-9x16 |
| 7x10 | -ar-7x10 |
-ar-{breakpoint}-7x10 |
| 11x5 | -ar-11x5 |
-ar-{breakpoint}-11x5 |
| 14x5 | -ar-14x5 |
-ar-{breakpoint}-14x5 |
| 16x9 | -ar-16x9 |
-ar-{breakpoint}-16x9 |