// Media // Image responsive .img-responsive {

display: block;
height: auto;
max-width: 100%;

}

// object-fit support is coming to Microsoft Edge // developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/ .img-fit-cover {

object-fit: cover;

}

.img-fit-contain {

object-fit: contain;

}

// Video responsive .video-responsive {

display: block;
overflow: hidden;
padding: 0;
position: relative;
width: 100%;
&::before {
  content: "";
  display: block;
  padding-bottom: 56.25%; // Default ratio 16:9, you can calculate this value by dividing 9 by 16
}

iframe,
object,
embed {
  border: 0;
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

}

video.video-responsive {

height: auto;
max-width: 100%;

&::before {
  content: none;
}

}

.video-responsive-4-3 {

&::before {
  padding-bottom: 75%; // Ratio 4:3
}

}

.video-responsive-1-1 {

&::before {
  padding-bottom: 100%; // Ratio 1:1
}

}

// Figure .figure {

margin: 0 0 $layout-spacing 0;

.figure-caption {
  color: $gray-color-dark;
  margin-top: $layout-spacing;
}

}