.media-player {
  $block: unquote("#{&}");
  overflow: hidden;
  margin: 0 auto;
  &__wrapper {
    margin: 0 0 1em;
    position: relative;
    vertical-align: top;
  }
  &__embed {
    display: block;
    vertical-align: middle;
    width: 100%;
  }
  &__download {
    display: block;
    margin: 1em 0;
    vertical-align: middle;
    width: 100%;
  }
  &__content {
    background: $color-purple;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    padding: $spacer-half;
    #{$block}__title,
    #{$block}__subtitle,
    #{$block}__caption {
      color: #fff;
    }
  }
  &__duration {
    color: $color-gray;
    font-size: $font-x-small;
    text-align: center;
  }
  &__title {
    color: #000;
    padding: 0 0 1em;
    font-size: $font-medium;
  }
  &__subtitle {
    color: #000;
    font-size: $font-x-medium;
    padding: 0 0 0.5em;
  }
  &__caption {
    color: #000;
    font-size: $font-small;
    text-align: center;
  }
}

audio {
  display: block;
  width: 100%;
}
iframe,
video {
  display: block;
  height: auto;
  min-height: 290px;
  max-height: 422px;
  width: 100%;
}
video {
  -webkit-box-shadow: inset 2px 4px 20px -5px rgba(0,0,0,1);
  -moz-box-shadow: inset 2px 4px 20px -5px rgba(0,0,0,1);
  box-shadow: inset 2px 4px 20px -5px rgba(0,0,0,1);
}
