import { cssRight, cssBoth } from "./components/02-molecules/visual-elements/teaser/tile-teaser/podcast-tile-teaser/config";

<div>
    <div class="blocks">
        <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay" style={cssRight}>
            <div class="podcast-teaser__body">
                <div class="podcast-teaser__caption">Podcast</div>
                <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                <h3 class="podcast-teaser__subheadline">
                    Podcast Subheadline lorem ipsum dolor sit amet bla bla trololo.
                </h3>
                <span class="icon-svg icon-arrow-long-right icon--brand-white"></span>
            </div>
            <div class="podcast-teaser__footer">
                <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
                    Heribert Innoq
                </div>
            </div>
        </a>
        <a href="#" class="podcast-teaser podcast-teaser--default">
            <div class="podcast-teaser__body">
                <div class="podcast-teaser__caption">Podcast</div>
                <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                <h3 class="podcast-teaser__subheadline">
                    Podcast Subheadline
                </h3>
                <span class="icon-svg icon-arrow-long-right icon--brand-white"></span>
            </div>
            <div class="podcast-teaser__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>
        </a>

        <a href="#" class="podcast-teaser podcast-teaser--avatar" style={cssRight}>
            <div class="podcast-teaser__body">
                <div class="podcast-teaser__caption">Podcast</div>
                <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                <h3 class="podcast-teaser__subheadline">
                    Podcast Subheadline
                </h3>
                <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
            </div>
            <div class="podcast-teaser__footer">
                <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
                    Heribert Innoq
                </div>
            </div>
        </a>
    </div>

    <div class="blocks">
        <a href="#" class="podcast-teaser podcast-teaser--default">
            <div class="podcast-teaser__body">
                <div class="podcast-teaser__caption">Podcast</div>
                <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                <h3 class="podcast-teaser__subheadline">
                    Podcast Subheadline
                </h3>
                <span class="icon-svg icon-arrow-long-right icon--brand-white"></span>
            </div>
            <div class="podcast-teaser__footer">
                <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
                    Heribert Innoq
                </div>
            </div>
        </a>

        <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay--big" style={cssBoth}>
            <div class="podcast-teaser__body">
                <div class="podcast-teaser__caption">Podcast</div>
                <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                <h3 class="podcast-teaser__subheadline">
                    Podcast Subheadline
                </h3>
                <span class="icon-svg icon-arrow-long-right icon--brand-white"></span>
            </div>
            <div class="podcast-teaser__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>
        </a>
    </div>

    <div class="blocks">
        <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay" style={cssRight}>
            <div class="podcast-teaser__body">
                <div class="podcast-teaser__caption">Podcast</div>
                <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                <h3 class="podcast-teaser__subheadline">
                    Podcast Subheadline
                </h3>
                <span class="icon-svg icon-arrow-long-right icon--brand-white"></span>
            </div>
            <div class="podcast-teaser__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>
        </a>

        <a href="#" class="podcast-teaser podcast-teaser--default">
            <div class="podcast-teaser__body">
                <div class="podcast-teaser__caption">Podcast</div>
                <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                <h3 class="podcast-teaser__subheadline">
                    Podcast Subheadline
                </h3>
                <span class="icon-svg icon-arrow-long-right icon--brand-white"></span>
            </div>
            <div class="podcast-teaser__footer">
                <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
                    Heribert Innoq
                </div>
            </div>
        </a>
    </div>
</div>