// Credit: Nicolas Gallagher and SUIT CSS.

.embed-responsive {

position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;

&::before {
  display: block;
  content: "";
}

.embed-responsive-item,
iframe,
embed,
object,
video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

}

@each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios {

$embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1);
$embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2);

.embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
  &::before {
    padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
  }
}

}