/**
 *  <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>
 *
 */

.figure {
    margin: 0;
    display: inline-block;
    line-height: 0;

    border: $plain-ui__border;
    border-radius: $plain-ui__border-radius;

    overflow: hidden;

    &__caption {
        padding: 0.75em 1.1em;
        font-size: 0.7rem;
        background: var(--background);
        line-height: $plain-ui__line-height;
        margin: 0;
        color: var(--text-secondary);
    }

    .media {
        border: 0;
    }
}

.media {
    border-radius: $plain-ui__border-radius;
    border: $plain-ui__border;
    width: 100%;
    height: auto;
}