/**
 * @file
 * The CSS and class names below are based on Slick media for easy migration.
 *
 * This serves for cross-browser compatibility (BC) with regular padding hack.
 * For modern implementation, see blazy.ratio-modern.css.
 */

/**
 * Aspect ratio element wrapper. So can use dynamic/fluid ratio via JS which is
 * not possible using ::pseudo selector approach.
 */
.media.media--ratio {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  /* Fixed for overflowing video with hard-coded width like lightboxes. */
  max-width: 100%;
  height: 0;
  min-height: 1px;
}

/* Trying to be nice to minimize abrupt changes. */
.media--ratio.is-b-loaded {
  transition: padding-bottom 0.2s;
}

/* To get percentage from 16:9, do: 9/16 x 100 = 56.25% */
/* 1:1 ratio */
.media--ratio--11 {
  padding-bottom: 100%;
}

/* 3:2 ratio */
.media--ratio--32 {
  padding-bottom: 66.66%;
}

/* 4:3 ratio */
.media--ratio--43 {
  padding-bottom: 75%;
}

/* 8:5 ratio */
.media--ratio--85 {
  padding-bottom: 62.5%;
}

/* 9:16 ratio */
.media--ratio--916 {
  padding-bottom: 177.78%;
}

/* 16:9 ratio */
.media--ratio--169 {
  padding-bottom: 56.25%;
}

/* 16:10 ratio */
.media--ratio--1610 {
  padding-bottom: 62.5%;
}

/* 21:9 ratio */
.media--ratio--219 {
  padding-bottom: 42.86%;
}