/**
 *  <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>
 *
 *
 *  @author Björn Hase, me@herr-hase.wtf
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://gitea.node001.net/tiny-components/plain-ui.git
 *
 */

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

    border: $border;
    border-radius: $border-radius;

    overflow: hidden;

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

        border-top: 1px solid var(--border-contrast);
    }

    .media {
        border: 0;
        border-radius: 0;
    }
}

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