Media Wrapper

⚠️ This class is deprecated. Replace with aspect-ratio.

Set the aspect ratio of an element by adding the .media-wrapper class to its parent (e.g., use this class to make an iframe responsive - example):

To create additional .media-wrapper--x:y classes, define your custom $media-wrapper-aspect-ratios SASS map and import it before the 'base' and 'custom-style' files of the framework.

$media-wrapper-aspect-ratios: (
  (4 3),
  (1 1),
  (21 9) // custom ratio
);

@import 'base';
@import 'custom-style';

Make sure to include the ratios 4/3 and 1/1 when defining your custom $media-wrapper-aspect-ratios map (as shown in the snippet above).

Alternatively, you can create an _util.scss file inside the /custom-style folder, and add your custom ratios. Here's an example:

.media-wrapper--4\:5 { 
  padding-bottom: 125%; // calc(5/4*100)
}