Media Helpers

Layout support for media items

.media__ratio--square

1 : 1

.media__ratio--full

4 : 3

.media__ratio--frame

3 : 2

.media__ratio--wide

16 : 9

.media__ratio--double

2 : 1

.media__ratio--triple

3 : 1

.media__ratio--triple-triple

3.75 : 1

.media__ratio--quad

4 : 1

.media__ratio--quad-double

4.5 : 1

.media__fit--fill

.media__fit--contain

.media__fit--cover

.media__fit--none

.media__fit--scale-down

.media__bleed--full

.media__bleed--right.media__bleed--half

.media__bleed--left.media__bleed--half

These classes will fill available container width and include these styles in addition to the ratios.

.{class} {
    width: 100%;
    object-fit: cover;
}

The ratio class should be added to the media asset directly.