Story Overview Page

<main role="main" class="story-overview-page container-vertical-spacing-xxl">
    <h1 class="section-heading--primary">INNOQ Stories</h1>

    <section class="container-md container-vertical-spacing-xl">
        <super-quote>
            <blockquote class="superquote" itemscope itemtype="http://schema.org/Person">
                <span class="superquote__zigzag"></span>
                <p>Wertschöpfung findet statt, wenn unsere Änderung oder das neue Feature in unserem Produktionssystem genutzt wird.</p>
                <cite class="superquote__author" itemprop="name">Heribert Innoq</cite>
                <span class="superquote__role" itemprop="jobTitle">Senior Consultant</span>
            </blockquote>
        </super-quote>
    </section>

    <section class="container-xl container-vertical-spacing-xl">
        <div class="tile-grid-md">
            <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                    <div class="case-tile-teaser__body">
                        <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                        <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                            Dies ist eine Headline
                        </h2>
                        <div class="case-tile-teaser__text case-tile-teaser__text">
                            Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                            hydrocarbons car.
                        </div>
                    </div>
                    <div class="case-tile-teaser__goto">
                        <span class="link-teaser">zum Projekt</span>
                    </div>
                </div>
            </a>
            <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                    <div class="case-tile-teaser__body">
                        <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                        <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                            Dies ist eine Headline
                        </h2>
                        <div class="case-tile-teaser__text case-tile-teaser__text">
                            Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                            hydrocarbons car.
                        </div>
                    </div>
                    <div class="case-tile-teaser__goto">
                        <span class="link-teaser">zum Projekt</span>
                    </div>
                </div>
            </a>
            <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                    <div class="case-tile-teaser__body">
                        <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                        <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                            Dies ist eine Headline
                        </h2>
                        <div class="case-tile-teaser__text case-tile-teaser__text">
                            Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                            hydrocarbons car.
                        </div>
                    </div>
                    <div class="case-tile-teaser__goto">
                        <span class="link-teaser">zum Projekt</span>
                    </div>
                </div>
            </a>
            <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                    <div class="case-tile-teaser__body">
                        <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                        <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                            Dies ist eine Headline
                        </h2>
                        <div class="case-tile-teaser__text case-tile-teaser__text">
                            Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                            hydrocarbons car.
                            Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                            hydrocarbons car.
                            Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                            hydrocarbons car.
                            Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                            hydrocarbons car.
                        </div>
                    </div>
                    <div class="case-tile-teaser__goto">
                        <span class="link-teaser">zum Projekt</span>
                    </div>
                </div>
            </a>
            <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                    <div class="case-tile-teaser__body">
                        <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                        <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                            Dies ist eine Headline
                        </h2>
                        <div class="case-tile-teaser__text case-tile-teaser__text">
                            Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                            hydrocarbons car.
                        </div>
                    </div>
                    <div class="case-tile-teaser__goto">
                        <span class="link-teaser">zum Projekt</span>
                    </div>
                </div>
            </a>
            <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                    <div class="case-tile-teaser__body">
                        <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                        <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                            Dies ist eine Headline
                        </h2>
                        <div class="case-tile-teaser__text case-tile-teaser__text">
                            Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                            hydrocarbons car.
                        </div>
                    </div>
                    <div class="case-tile-teaser__goto">
                        <span class="link-teaser">zum Projekt</span>
                    </div>
                </div>
            </a>
            <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                    <div class="case-tile-teaser__body">
                        <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                        <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                            Dies ist eine Headline
                        </h2>
                        <div class="case-tile-teaser__text case-tile-teaser__text">
                            Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                            hydrocarbons car.
                        </div>
                    </div>
                    <div class="case-tile-teaser__goto">
                        <span class="link-teaser">zum Projekt</span>
                    </div>
                </div>
            </a>
        </div>
    </section>
</main>