One Column Grid

<div class="demo demo--inverted">
    <div class="one-column-grid">
        <a href="#" class="list-teaser">
            <div class="list-teaser__body">
                <div class="list-teaser__caption">Artikel</div>
                <h2 class="list-teaser__headline">Artikel Headline</h2>
                <h3 class="list-teaser__subheadline">
                    Artikel Subheadline
                    <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                </h3>
            </div>
            <div class="list-teaser__footer">
                <div rel="author" class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                    <div class="author-bio__image avatar avatar--sm">
                        <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"
                            alt="Portrait von Heribert Innoq" />
                    </div>
                    <address>
                        <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                        <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                    </address>
                </div>
            </div>
        </a>

        <a href="#" class="list-teaser-event">
            <div class="event-date-section">
                <div class="label talk">Training</div>
                <div class="event-date-wrapper">
                    <time class="event-date" datetime="2017-06-23">
                        <span class="event-day-month">
                            <span class='event-day'>23</span>
                            <span class='event-month'>Jun</span>
                        </span>
                    </time>
                    <hr class="event-date-separator" />
                    <time class="event-date" datetime="2017-06-24">
                        <span class="event-day-month">
                            <span class='event-day'>24</span>
                            <span class='event-month'>Jun</span>
                        </span>
                        <span class='event-year'>2017</span>
                    </time>
                </div>
            </div>
            <div class="list-teaser__content">
                <div class="list-teaser__body">
                    <div class="label training">Training</div>
                    <h2 class="list-teaser-event__headline">Training Titel</h2>
                    <h3 class="list-teaser-event__subheadline">
                        Trainingsort
                        <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                    </h3>
                </div>
                <div class="list-teaser-event__footer">
                    <div class="link-teaser">Mehr erfahren</div>
                </div>
            </div>
        </a>

        <a href="#" class="list-teaser">
            <div class="list-teaser__body">
                <div class="list-teaser__caption">Artikel</div>
                <h2 class="list-teaser__headline">Artikel Headline</h2>
                <h3 class="list-teaser__subheadline">
                    Artikel Subheadline
                    <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                </h3>
            </div>
            <div class="list-teaser__footer">
                <div rel="author" class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                    <div class="author-bio__image avatar avatar--sm">
                        <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"
                            alt="Portrait von Heribert Innoq" />
                    </div>
                    <address>
                        <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                        <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                    </address>
                </div>
                <div rel="author" class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                    <div class="author-bio__image avatar avatar--sm">
                        <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"
                            alt="Portrait von Heribert Innoq" />
                    </div>
                    <address>
                        <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                        <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                    </address>
                </div>
                <div rel="author" class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                    <div class="author-bio__image avatar avatar--sm">
                        <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"
                            alt="Portrait von Heribert Innoq" />
                    </div>
                    <address>
                        <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                        <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                    </address>
                </div>
            </div>
        </a>

        <a href="#" class="case-list-teaser bg-image-edition-12">
            <div class="case-list-teaser__wrapper">
                <div class="case-list-teaser__body">
                    <div class="case-list-teaser__caption">case study</div>
                    <h2 class="case-list-teaser__title punch-in bg-image-edition-12">
                        case study headline eggs
                    </h2>
                    <div class="case-list-teaser__text">
                        lorem ipsum dolor sit amet, consectetur adipisicing elit. velit
                        doloremque culpa minima vero quod, optio itaque nisi deserunt,
                        debitis ad laudantium libero, quia nemo!
                    </div>
                </div>
                <div class="case-list-teaser__footer">
                    <span class="link-teaser">mehr erfahren</span>
                </div>
            </div>
        </a>

        <a href="#" class="case-list-teaser bg-image-edition-12">
            <div class="case-list-teaser__wrapper">
                <div class="case-list-teaser__body">
                    <div class="case-list-teaser__caption">case study</div>
                    <h2 class="case-list-teaser__title punch-in bg-image-edition-12">
                        case study headline eggs
                    </h2>
                    <div class="case-list-teaser__text">
                        lorem ipsum dolor sit amet, consectetur adipisicing elit. velit
                        doloremque culpa minima vero quod, optio itaque nisi deserunt,
                        debitis ad laudantium libero, quia nemo!
                    </div>
                </div>
                <div class="case-list-teaser__footer">
                    <span class="link-teaser">mehr erfahren</span>
                </div>
            </div>
        </a>

        <a href="#" class="list-teaser-abstract primary">
            <div class="list-teaser__body">
                <div class="list-teaser-abstract__caption">Artikel</div>
                <h2 class="list-teaser-abstract__headline">Artikel Headline</h2>
                <p class="list-teaser-abstract__text">
                    Lorem gibson dermatrodes boy nodality neural office sprawl futurity Lado-Acheson count zero interrupt
                    Night
                    City tanto papier-mache kanji corporation meta-lights neurosurgery.
                    Lorem gibson Chiba neon neon motion Mycotoxin Metro Holografix boat RAM AI disposable lights saturation
                    point stimulate boat systemic vehicle.
                    <span class="icon icon-arrow-long-right icon--brand-white"></span>
                </p>
            </div>
            <div class="list-teaser__footer">
                <div rel="author" class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                    <div class="author-bio__image avatar avatar--sm">
                        <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"
                            alt="Portrait von Heribert Innoq" />
                    </div>
                    <address>
                        <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                        <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                    </address>
                </div>
            </div>
        </a>
        <a href="#" class="list-teaser-podcast list-teaser-podcast--avatar--overlay--big"
            style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }}), url({{ path '/assets/example-content/heribert-links.png' }}) ">
            <div class="list-teaser-podcast__body">
                <div class="list-teaser-podcast__caption">Podcast</div>
                <h2 class="list-teaser-podcast__headline">Podcast Headline</h2>
                <h3 class="list-teaser-podcast__subheadline">
                    Podcast Subheadline
                </h3>
                <span class="icon icon-arrow-long-right icon--brand-white"></span>
            </div>
            <div class="list-teaser-podcast__footer">
                <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                    Heribert Innoq
                </div>
                <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                    Heribert Innoq
                </div>
                <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                    Heribert Innoq
                </div>
                <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                    Heribert Innoq
                </div>
            </div>
        </a>
    </div>
</div>