.media-element {
    $this: &;

    display: flex;
    flex-direction: column;

    & + & {
        margin-top: $rocket-spacing-size-7;
    }

    &__caption {
        @extend %base-styles-text;

        margin-bottom: $rocket-spacing-size-5;
    }

    &__video-container,
    &__image-container {
        @include responsive-ratio(16, 9);

        position: relative;
        max-width: 100%;
        overflow: hidden;

        video,
        iframe,
        img {
            @include cover(false);

            border: 0;
        }
    }

    &__video-container {
        background-color: #000;
    }

    &--ratio-1-1 {
        #{$this} {
            &__video-container,
            &__image-container {
                @include responsive-ratio(1, 1);
            }
        }
    }

    &--ratio-4-3 {
        #{$this} {
            &__video-container,
            &__image-container {
                @include responsive-ratio(4, 3);
            }
        }
    }

    &--ratio-21-9 {
        #{$this} {
            &__video-container,
            &__image-container {
                @include responsive-ratio(21, 9);
            }
        }
    }
}