.media-object {
    --rocket-ui-media-object-text-color: var(--rocket-color-grey-600);
    --rocket-ui-media-object-svg-color: var(--rocket-color-white-base);
    --rocket-ui-media-object-border-radius: var(--rocket-image-border-radius);

    $this: &;

    display: table;
    position: relative;
    margin: 0;

    &__picture {
        position: relative;
    }

    &__image {
        @include size(100%, auto);
    }

    &__figcaption {
        @extend %base-styles-text-xs;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        color: var(--rocket-color-text-primary);
        text-align: left;
        padding: .5rem .5rem 0;
        font-family: var(--rocket-font-tertiary);
        font-weight: 300;
        font-size: .875rem;
    }

    &__link {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: 5px;

        &::after {
            @include transition;
            @include theme-backdrop;

            border-radius: var(--rocket-ui-media-object-border-radius);
            opacity: 0;
            content: '';
        }

        @include event {
            &::after,
            #{$this}__icon {
                opacity: 1;
            }
        }
    }

    &__icon {
        @include transition;

        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        padding: 0;
        font-size: 3rem;
        transform: translate(-50%, -50%);
        opacity: 0;

        svg {
            @include size(1em);

            stroke: var(--rocket-ui-media-object-svg-color);
        }
    }

    &--video {
        #{$this}__figcaption {
            text-align: center;
        }

        #{$this}__link {
            &::after {
                opacity: .15;
            }

            @include event {
                &::after,
                #{$this}__icon {
                    opacity: .65;
                }
            }
        }

        video {
            aspect-ratio: 16 / 9;
        }

        #{$this}__icon {
            opacity: 1;
        }
    }

    &--fancy-box-video {
        ::-webkit-media-controls {
            display: none;
        }
    }
}