/**
 *  <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__layout__masonry()
{
    .masonry {
        display: flex;
        flex-flow: column wrap;
        align-content: space-between;

        &__item {
            width: 32%;
            margin-bottom: 2%; /* Optional */
        }

        /* Re-order items into 3 rows */
        &__item:nth-child(3n+1) { order: 1; }
        &__item:nth-child(3n+2) { order: 2; }
        &__item:nth-child(3n)   { order: 3; }

        /* Force new columns */
        &:before,
        &:after {
            content: "";
            flex-basis: 100%;
            width: 0;
            order: 2;
        }
    }
}