/**
 *  masonry
 *
 *  <div class="masonry">
 *      <div class="mansonry__iten">
 *
 *      </div>
 *  </div>
 *
 *
 */

@mixin plain-ui__layout__masonry()
{
    $plain-ui__masonry_sizes: (
        1: 25%,
        2: 55%,
        3: 20%,
        4: 67%,
        5: 33%
    ) !default;

    .masonry {
        display: flex;
        width: 100%;
        flex-flow: row wrap;

        &__item {
            height: 200px;
            padding-left: 1px;
            padding-bottom: 1px;
            width: 100%;

            @include plain-ui__media-sm() {
                height: 300px;

                @each $index, $size in $plain-ui__masonry_sizes {
                    &:nth-child(4n+#{$index}) {
                        width: #{$size};
                    }
                }
            }
        }
    }
}