<section
            class="section section-type-hero section-text-white section-layout-normal space-inner-before-none space-inner-after-none">
        <article class="hero">
            <div class="hero-img-container">
                <picture>
                    <source srcset="https://picsum.photos/768/845 768w" media="(max-width: 768px)">
                    <source srcset="https://picsum.photos/992/558 992w" media="(max-width: 992px)">
                    <img class="hero-img img-max" alt="" src="https://picsum.photos/1920/1080" width="1920"
                         height="1080">
                </picture>
            </div>
            <div class="hero-img-gradient bg-gradient-dark"></div>
            <div class="hero-text">
                <div class="row no-gutters align-items-end">
                    <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
                        <div class="hero-text-inner">
                            <div class="hero-bar bar bar-primary bg-primary-gradient"></div>
                            <header>
                                <div class="kicker kicker-lead">Hero mit Hintergrundbild</div>
                                <h1 class="headline">At solmen va esser <br/>necessi far uniform grammatica. </h1>
                            </header>
                            <div class="bodytext">
                                <p><span class="display-2">Lorem ipsum dolor sit.</span></p>
                                <p><a href="#" class="btn btn-primary btn-lg">Preme hic!</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </section>
    

    <section
            class="section section-type-hero section-text-dark section-layout-simple space-inner-before-none space-inner-after-none">
        <div class="container">
            <article class="hero">
                <div class="hero-text">
                    <div class="row ">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
                            <div class="hero-text-inner">
                                <div class="hero-bar bar bar-primary bg-primary-gradient"></div>
                                <header>
                                    <div class="kicker kicker-lead">Hero ohne Hintergrundbild</div>
                                    <h1 class="headline">At solmen va esser <br/>necessi far uniform grammatica. </h1>
                                </header>
                                <p class="lead">
                                    Li Europan lingues es membres del sam familie. Lor separat existentie es un myth.
                                    Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues
                                    differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </article>
        </div>
    </section>