col-four

<section class="col-four">
    <div class="col-four__inner">
        <div class="col-four__content">
            <div class="col-four__item">
                <div class="col-four__item__inner">
                    <article class="snippet-a">
                        <a href="#" class="snippet-a__visual">
                            <div class="snippet-a__image">
                                <picture class="visual">
                                    <img data-sizes="auto" data-src="/graphics/DSI_Breda.jpg" class="lazyload" alt="">
                                </picture>

                            </div>
                        </a>

                        <div class="snippet-a__content">
                            <h4 class="snippet-a__heading heading">
                                <a href="" class="link link--default">
                                    <span class="link__label">Heading 22 chars max</span>
                                </a>

                            </h4>

                            <span class="snippet-a__subheading">Subheading</span>

                            <div class="snippet-a__description">
                                Description text within a range 300 a 350 chars. Ipsa nemo repellendus molestias. Doloremque, Aut quae quisquam vitae architecto, quasi esse incidunt. Explicabo asperiores, quidem excepturi veniam eos odio tenetur corporis! Aut quae quisquam vitae architecto, quasi esse incidunt. Ipsa nemo repellendus molestias. Doloremque.
                            </div>
                        </div>

                        <div class="snippet-a__actions actions actions--start">
                            <div class="actions__item">
                                <a href="#" class="link link--colored">
                                    <span class="link__label">Link</span>
                                </a>

                            </div>
                        </div>
                    </article>

                </div>
            </div>
            <div class="col-four__item">
                <div class="col-four__item__inner">
                    <article class="snippet-a">
                        <a href="#" class="snippet-a__visual">
                            <div class="snippet-a__image">
                                <picture class="visual">
                                    <img data-sizes="auto" data-src="/graphics/Ibiza_Blau_Music.jpg" class="lazyload" alt="">
                                </picture>

                            </div>
                        </a>

                        <div class="snippet-a__content">
                            <h4 class="snippet-a__heading heading">
                                <a href="" class="link link--default">
                                    <span class="link__label">Heading 22 chars max</span>
                                </a>

                            </h4>

                            <span class="snippet-a__subheading">Subheading</span>

                            <div class="snippet-a__description">
                                Description text within a range 300 a 350 chars. Ipsa nemo repellendus molestias. Doloremque, Aut quae quisquam vitae architecto, quasi esse incidunt. Explicabo asperiores, quidem excepturi veniam eos odio tenetur corporis! Aut quae quisquam vitae architecto, quasi esse incidunt. Ipsa nemo repellendus molestias. Doloremque.
                            </div>
                        </div>

                        <div class="snippet-a__actions actions actions--start">
                            <div class="actions__item">
                                <a href="#" class="link link--colored">
                                    <span class="link__label">Link</span>
                                </a>

                            </div>
                        </div>
                    </article>

                </div>
            </div>
            <div class="col-four__item">
                <div class="col-four__item__inner">
                    <article class="snippet-a">
                        <a href="#" class="snippet-a__visual">
                            <div class="snippet-a__image">
                                <picture class="visual">
                                    <img data-sizes="auto" data-src="/graphics/Microfusa.jpg" class="lazyload" alt="">
                                </picture>

                            </div>
                        </a>

                        <div class="snippet-a__content">
                            <h4 class="snippet-a__heading heading">
                                <a href="" class="link link--default">
                                    <span class="link__label">Heading 22 chars max</span>
                                </a>

                            </h4>

                            <span class="snippet-a__subheading">Subheading</span>

                            <div class="snippet-a__description">
                                Description text within a range 300 a 350 chars. Ipsa nemo repellendus molestias. Doloremque, Aut quae quisquam vitae architecto, quasi esse incidunt. Explicabo asperiores, quidem excepturi veniam eos odio tenetur corporis! Aut quae quisquam vitae architecto, quasi esse incidunt. Ipsa nemo repellendus molestias. Doloremque.
                            </div>
                        </div>

                        <div class="snippet-a__actions actions actions--start">
                            <div class="actions__item">
                                <a href="#" class="link link--colored">
                                    <span class="link__label">Link</span>
                                </a>

                            </div>
                        </div>
                    </article>

                </div>
            </div>
            <div class="col-four__item">
                <div class="col-four__item__inner">
                    <article class="snippet-a">
                        <a href="#" class="snippet-a__visual">
                            <div class="snippet-a__image">
                                <picture class="visual">
                                    <img data-sizes="auto" data-src="/graphics/Music_Academy_Rimini.jpg" class="lazyload" alt="">
                                </picture>

                            </div>
                        </a>

                        <div class="snippet-a__content">
                            <h4 class="snippet-a__heading heading">
                                <a href="" class="link link--default">
                                    <span class="link__label">Heading 22 chars max</span>
                                </a>

                            </h4>

                            <span class="snippet-a__subheading">Subheading</span>

                            <div class="snippet-a__description">
                                Description text within a range 300 a 350 chars. Ipsa nemo repellendus molestias. Doloremque, Aut quae quisquam vitae architecto, quasi esse incidunt. Explicabo asperiores, quidem excepturi veniam eos odio tenetur corporis! Aut quae quisquam vitae architecto, quasi esse incidunt. Ipsa nemo repellendus molestias. Doloremque.
                            </div>
                        </div>

                        <div class="snippet-a__actions actions actions--start">
                            <div class="actions__item">
                                <a href="#" class="link link--colored">
                                    <span class="link__label">Link</span>
                                </a>

                            </div>
                        </div>
                    </article>

                </div>
            </div>
        </div>
    </div>
</section>