.#{$prefix}-content-media {
  width: 100%;
  margin: space(5N) 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  &__img {
    width: 100%;
    position: relative;

    //le padding permettant de définir le ratio d'aspect est appliqué sur un pseudo-élément before qui hérite de la modification de taille --lg et --sm de l'élément img ou vid
    &::before {
      content: '';
      display: block;
      width: 100%;
      padding-bottom: map_get($ratio-scale, 16x9);
    }
  }

  &__img img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    top: 0;
    left: 0;
  }

  &__caption,
  &__transcription {
    width: 100%;
    text-align: right;
    margin-top: space(1N);
  }

  &__caption {
    @include text-styles(xs);
  }

  &__transcription {
    @include text-styles(sm);

    .#{$prefix}-btn {
      @include scheme-element-text-color(bf500);
      @include scheme-element-bg-color(t-plain, true, after);
      @include scheme-element-focus();
      height: 2rem;
      padding: space(1N) space(1-5N);
      margin: (- space(1N)) (- space(1-5N));
      flex-direction: row-reverse;
      font-size: font-size(14);

      &::after {
        border-radius: 1rem;
      }

      @include font-icon(menu-2-fill, sm, before) {
        margin-left: space(1N);
        display: inline-block;
        vertical-align: middle;
      }
    }
  }

  &--sm &__img,
  &--sm .#{$prefix}-responsive-vid,
  &--sm &__caption,
  &--sm &__transcription {
    width: 83.333%;

    @include respond-from(md) {
      width: 75%;
    }
  }

  &--lg &__img,
  &--lg .#{$prefix}-responsive-vid,
  &--lg &__caption,
  &--lg &__transcription {
    width: 116.666%;

    @include respond-from(md) {
      width: 125%;
    }
  }

  &--lg &__img,
  &--lg .#{$prefix}-responsive-vid {
    max-width: 100vw;
  }

  &--lg &__caption,
  &--lg &__transcription {
    max-width: calc(100vw - #{space(4N)});
  }
}