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

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

        <a href="#" class="podcast-teaser podcast-teaser--default podcast-teaser--default--security">
            <div class="podcast-teaser__body">
                <div class="podcast-teaser__caption podcast-teaser__caption--security">Security-Podcast</div>
                <h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
                <h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
                    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>