/**
 *  <figure class="media-figure">
 *      <img class="media__img" src="https://via.placeholder.com/150" />
 *      <figcaption class="media-figure__caption">
 *          food truck yr franzen pabst
 *      </figcaption>
 *  </figure>
 *
 */

@mixin plain-ui__component__media()
{
    .figure {
        margin: 0;
        display: inline-block;
        line-height: 0;

        border: 1px solid $plain-ui__primary-light;
        border-radius: 2px;

        overflow: hidden;

        &__caption {
            padding: 0.75em 1.1em;
            font-size: 0.7rem;
            background: $plain-ui__primary-light;
            line-height: $plain-ui__line-height;
            margin: 0;
            color: white;
        }

        img.media {
            border: 0;
        }
    }

    img.media {
        border-radius: 2px;
        border: 1px solid $plain-ui__primary-light;
        width: 100%;
        height: auto;
    }
}