<div class="u-background-grey-20 u-layout-centerContent u-cf">
    <section class="js-Masonry-container u-layout-medium" data-columns>

        <div class="Masonry-item js-Masonry-item">
            <div class="u-nbfc u-borderShadow-xxs u-borderRadius-m u-color-grey-30 u-background-white">
                <img src="//placehold.it/400x220" class="u-sizeFull" alt="numquam sit veniam" />
                <div class="u-text-r-l u-padding-r-all u-layout-prose">
                    <p class="u-text-h6 u-margin-bottom-l"><a class="u-color-50 u-textClean" href="">earum rem culpa</a></p>
                    <h3 class="u-text-h4 u-margin-r-bottom"><a class="u-text-r-m u-color-black u-textWeight-400 u-textClean" href="">A architecto qui et veritatis.</a></h3>
                    <p class="u-text-p u-textSecondary">Quis molestiae ullam et. Quia inventore sint qui. Fugiat et consequatur sapiente est cum suscipit alias aut. Saepe est porro amet qui amet ut. Dolor ut voluptatem voluptas quasi animi iste rem accusantium. Beatae iure veritatis voluptatem
                        ut eum consequatur et perferendis.</p>
                </div>
            </div>

        </div>
        <div class="Masonry-item js-Masonry-item">
            <div class="u-nbfc u-borderShadow-xxs u-borderRadius-m u-color-grey-30 u-background-white">
                <img src="//placehold.it/400x220" class="u-sizeFull" alt="numquam sit veniam" />
                <div class="u-text-r-l u-padding-r-all u-layout-prose">
                    <p class="u-text-h6 u-margin-bottom-l"><a class="u-color-50 u-textClean" href="">earum rem culpa</a></p>
                    <h3 class="u-text-h4 u-margin-r-bottom"><a class="u-text-r-m u-color-black u-textWeight-400 u-textClean" href="">A architecto qui et veritatis.</a></h3>
                    <p class="u-text-p u-textSecondary">Mollitia laborum voluptas consequatur aliquid aut voluptatem. Sit nisi veritatis eius velit expedita deserunt. Distinctio iste quo eligendi error sint officiis. Ullam aut sit voluptatem. Quis est quaerat provident modi quo ut aspernatur.</p>
                </div>
            </div>

        </div>
        <div class="Masonry-item js-Masonry-item">
            <div class="u-nbfc u-borderShadow-xxs u-borderRadius-m u-color-grey-30 u-background-white">
                <img src="//placehold.it/400x220" class="u-sizeFull" alt="numquam sit veniam" />
                <div class="u-text-r-l u-padding-r-all u-layout-prose">
                    <p class="u-text-h6 u-margin-bottom-l"><a class="u-color-50 u-textClean" href="">earum rem culpa</a></p>
                    <h3 class="u-text-h4 u-margin-r-bottom"><a class="u-text-r-m u-color-black u-textWeight-400 u-textClean" href="">A architecto qui et veritatis.</a></h3>
                    <p class="u-text-p u-textSecondary">Minus maxime qui saepe. Quis qui molestiae. Nisi mollitia quod qui mollitia perferendis asperiores dolorem sed dolorum. Quisquam laborum suscipit aut aut dicta nihil et illum. Quia voluptatem rem explicabo asperiores ea. Cupiditate
                        reiciendis nulla minima id expedita quia.</p>
                </div>
            </div>

        </div>

        <div class="Masonry-item js-Masonry-item">
            <div class="u-nbfc u-borderShadow-xxs u-borderRadius-m u-color-grey-30 u-background-white">
                <img src="//placehold.it/400x220" class="u-sizeFull" alt="numquam sit veniam" />
                <div class="u-text-r-l u-padding-r-all u-layout-prose">
                    <p class="u-text-h6 u-margin-bottom-l"><a class="u-color-50 u-textClean" href="">earum rem culpa</a></p>
                    <h3 class="u-text-h4 u-margin-r-bottom"><a class="u-text-r-m u-color-black u-textWeight-400 u-textClean" href="">A architecto qui et veritatis.</a></h3>
                    <p class="u-text-p u-textSecondary">Mollitia laborum voluptas consequatur aliquid aut voluptatem. Sit nisi veritatis eius velit expedita deserunt. Distinctio iste quo eligendi error sint officiis. Ullam aut sit voluptatem. Quis est quaerat provident modi quo ut aspernatur.</p>
                </div>
            </div>

        </div>
        <div class="Masonry-item js-Masonry-item">
            <div class="u-nbfc u-borderShadow-xxs u-borderRadius-m u-color-grey-30 u-background-white">
                <img src="//placehold.it/400x220" class="u-sizeFull" alt="numquam sit veniam" />
                <div class="u-text-r-l u-padding-r-all u-layout-prose">
                    <p class="u-text-h6 u-margin-bottom-l"><a class="u-color-50 u-textClean" href="">earum rem culpa</a></p>
                    <h3 class="u-text-h4 u-margin-r-bottom"><a class="u-text-r-m u-color-black u-textWeight-400 u-textClean" href="">A architecto qui et veritatis.</a></h3>
                    <p class="u-text-p u-textSecondary">Minus maxime qui saepe. Quis qui molestiae. Nisi mollitia quod qui mollitia perferendis asperiores dolorem sed dolorum. Quisquam laborum suscipit aut aut dicta nihil et illum. Quia voluptatem rem explicabo asperiores ea. Cupiditate
                        reiciendis nulla minima id expedita quia.</p>
                </div>
            </div>

        </div>
        <div class="Masonry-item js-Masonry-item">
            <div class="u-nbfc u-borderShadow-xxs u-borderRadius-m u-color-grey-30 u-background-white">
                <img src="//placehold.it/400x220" class="u-sizeFull" alt="numquam sit veniam" />
                <div class="u-text-r-l u-padding-r-all u-layout-prose">
                    <p class="u-text-h6 u-margin-bottom-l"><a class="u-color-50 u-textClean" href="">earum rem culpa</a></p>
                    <h3 class="u-text-h4 u-margin-r-bottom"><a class="u-text-r-m u-color-black u-textWeight-400 u-textClean" href="">A architecto qui et veritatis.</a></h3>
                    <p class="u-text-p u-textSecondary">Quo assumenda magni repellat nostrum voluptatem quaerat dicta dolorum et. Iste hic natus et est. Et nam odio sapiente. Quod sit nihil unde eum doloremque.</p>
                </div>
            </div>

        </div>

    </section>
</div>

<div class="u-background-grey-20 u-layout-centerContent u-cf">
    <section class="js-Masonry-container u-layout-medium" data-columns>

        <div class="Masonry-item js-Masonry-item">
            <div class="u-nbfc u-borderShadow-xxs u-borderRadius-m u-color-grey-30 u-background-white">
                <img src="//placehold.it/400x220" class="u-sizeFull" alt="numquam sit veniam" />
                <div class="u-text-r-l u-padding-r-all u-layout-prose">
                    <p class="u-text-h6 u-margin-bottom-l"><a class="u-color-50 u-textClean" href="">earum rem culpa</a></p>
                    <h3 class="u-text-h4 u-margin-r-bottom"><a class="u-text-r-m u-color-black u-textWeight-400 u-textClean" href="">A architecto qui et veritatis.</a></h3>
                    <p class="u-text-p u-textSecondary">Quis molestiae ullam et. Quia inventore sint qui. Fugiat et consequatur sapiente est cum suscipit alias aut. Saepe est porro amet qui amet ut. Dolor ut voluptatem voluptas quasi animi iste rem accusantium. Beatae iure veritatis voluptatem
                        ut eum consequatur et perferendis.</p>
                </div>
            </div>

        </div>
        <div class="Masonry-item js-Masonry-item">
            <div class="u-nbfc u-borderShadow-xxs u-borderRadius-m u-color-grey-30 u-background-white">
                <img src="//placehold.it/400x220" class="u-sizeFull" alt="numquam sit veniam" />
                <div class="u-text-r-l u-padding-r-all u-layout-prose">
                    <p class="u-text-h6 u-margin-bottom-l"><a class="u-color-50 u-textClean" href="">earum rem culpa</a></p>
                    <h3 class="u-text-h4 u-margin-r-bottom"><a class="u-text-r-m u-color-black u-textWeight-400 u-textClean" href="">A architecto qui et veritatis.</a></h3>
                    <p class="u-text-p u-textSecondary">Mollitia laborum voluptas consequatur aliquid aut voluptatem. Sit nisi veritatis eius velit expedita deserunt. Distinctio iste quo eligendi error sint officiis. Ullam aut sit voluptatem. Quis est quaerat provident modi quo ut aspernatur.</p>
                </div>
            </div>

        </div>
        <div class="Masonry-item js-Masonry-item">
            <div class="u-nbfc u-borderShadow-xxs u-borderRadius-m u-color-grey-30 u-background-white">
                <img src="//placehold.it/400x220" class="u-sizeFull" alt="numquam sit veniam" />
                <div class="u-text-r-l u-padding-r-all u-layout-prose">
                    <p class="u-text-h6 u-margin-bottom-l"><a class="u-color-50 u-textClean" href="">earum rem culpa</a></p>
                    <h3 class="u-text-h4 u-margin-r-bottom"><a class="u-text-r-m u-color-black u-textWeight-400 u-textClean" href="">A architecto qui et veritatis.</a></h3>
                    <p class="u-text-p u-textSecondary">Minus maxime qui saepe. Quis qui molestiae. Nisi mollitia quod qui mollitia perferendis asperiores dolorem sed dolorum. Quisquam laborum suscipit aut aut dicta nihil et illum. Quia voluptatem rem explicabo asperiores ea. Cupiditate
                        reiciendis nulla minima id expedita quia.</p>
                </div>
            </div>

        </div>

        <div class="Masonry-item js-Masonry-item">
            <div class="u-nbfc u-borderShadow-xxs u-borderRadius-m u-color-grey-30 u-background-white">
                <img src="//placehold.it/400x220" class="u-sizeFull" alt="numquam sit veniam" />
                <div class="u-text-r-l u-padding-r-all u-layout-prose">
                    <p class="u-text-h6 u-margin-bottom-l"><a class="u-color-50 u-textClean" href="">earum rem culpa</a></p>
                    <h3 class="u-text-h4 u-margin-r-bottom"><a class="u-text-r-m u-color-black u-textWeight-400 u-textClean" href="">A architecto qui et veritatis.</a></h3>
                    <p class="u-text-p u-textSecondary">Mollitia laborum voluptas consequatur aliquid aut voluptatem. Sit nisi veritatis eius velit expedita deserunt. Distinctio iste quo eligendi error sint officiis. Ullam aut sit voluptatem. Quis est quaerat provident modi quo ut aspernatur.</p>
                </div>
            </div>

        </div>
        <div class="Masonry-item js-Masonry-item">
            <div class="u-nbfc u-borderShadow-xxs u-borderRadius-m u-color-grey-30 u-background-white">
                <img src="//placehold.it/400x220" class="u-sizeFull" alt="numquam sit veniam" />
                <div class="u-text-r-l u-padding-r-all u-layout-prose">
                    <p class="u-text-h6 u-margin-bottom-l"><a class="u-color-50 u-textClean" href="">earum rem culpa</a></p>
                    <h3 class="u-text-h4 u-margin-r-bottom"><a class="u-text-r-m u-color-black u-textWeight-400 u-textClean" href="">A architecto qui et veritatis.</a></h3>
                    <p class="u-text-p u-textSecondary">Minus maxime qui saepe. Quis qui molestiae. Nisi mollitia quod qui mollitia perferendis asperiores dolorem sed dolorum. Quisquam laborum suscipit aut aut dicta nihil et illum. Quia voluptatem rem explicabo asperiores ea. Cupiditate
                        reiciendis nulla minima id expedita quia.</p>
                </div>
            </div>

        </div>
        <div class="Masonry-item js-Masonry-item">
            <div class="u-nbfc u-borderShadow-xxs u-borderRadius-m u-color-grey-30 u-background-white">
                <img src="//placehold.it/400x220" class="u-sizeFull" alt="numquam sit veniam" />
                <div class="u-text-r-l u-padding-r-all u-layout-prose">
                    <p class="u-text-h6 u-margin-bottom-l"><a class="u-color-50 u-textClean" href="">earum rem culpa</a></p>
                    <h3 class="u-text-h4 u-margin-r-bottom"><a class="u-text-r-m u-color-black u-textWeight-400 u-textClean" href="">A architecto qui et veritatis.</a></h3>
                    <p class="u-text-p u-textSecondary">Quo assumenda magni repellat nostrum voluptatem quaerat dicta dolorum et. Iste hic natus et est. Et nam odio sapiente. Quod sit nihil unde eum doloremque.</p>
                </div>
            </div>

        </div>

    </section>
</div>