<section class="page-section d-none d-md-block">
   <div class="grid">
       <div class="col-desk-5 col-tab-3">
           <img class="img-fluid" src="/placeholder/mood-02.jpg" alt="">
       </div>
       <div class="col-desk-4 col-desk-shift-1 col-tab-2 col-tab-shift-1">
           <img class="img-fluid mt-4" src="/placeholder/mood-03.jpg" alt="">
       </div>
   </div>
</section>

<section class="page-section d-none d-md-block">
   <div class="grid">
       <div class="col-desk-9 col-desk-shift-3 col-tab-5 col-tab-shift-1">
           <img class="img-fluid" src="/placeholder/energy-01.jpg" alt="">
       </div>
   </div>
</section>

<section class="page-section">
   <div class="grid justify-content-center">
       <div class="col-desk-10 col-tab-6 col-mob-6 text-center">
           <p class="p1 mb-3">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen. Weit hinten, hinter.</p>
           <a class="btn btn-primary" href="#"><span>Create and customize Profiles</span></a>
       </div>
   </div>
</section>

<section class="page-section" id="cm_text_left">
   <div class="grid align-items-center">
       <div class="col-desk-4 col-tab-4 col-mob-6">
           <h3>Weit hinten, hinter den Wortbergen</h3>
           <p class="p4">Fern der Länder Vokalien und leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprach ozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein Land, in dem einem gebratene. Fern der Länder Vokalien und leben die Blindtexte</p>
           <a class="link-sm" href="#">Show me more Energy Bikes</a>
       </div>
       <div class="col-desk-8 col-tab-shift-1 col-tab-5 col-mob-6 d-none d-md-block">
           <img class="img-fluid" src="/placeholder/mood.jpg" alt="">
       </div>
   </div>
</section>

<section class="page-section">
   <div class="grid align-items-center">
       <div class="col-desk-5 col-tab-4 col-mob-6 d-none d-md-block">
           <img class="img-fluid mb-1 mb-lg-0" src="/placeholder/energy-02.jpg" alt="">
       </div>
       <div class="col-desk-5 col-desk-shift-1 col-tab-4 col-tab-shift-0 col-mob-6">
           <h3>Weit hinten, hinter den Wortbergen liegen die Berge</h3>
           <p class="p4">Fern der Länder Vokalien und leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprach ozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein Land, in dem einem gebratene.</p>
           <a class="link-sm" href="#">Show RIDE 50 evation</a>
       </div>
   </div>
</section>

<section class="page-section page-section--content">
   <div class="grid justify-content-center">
       <div class="col-desk-10 col-tab-5 col-mob-6">
           <p class="p3 mb-0">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die
               Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen
               Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den
               nötigen Regelialien. Es ist ein paradiesmatisches Land <a href="#">Ich bin ein Link</a>, in dem einem gebratene Satzteile in den Mund
               fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein
               geradezu unorthographisches Leben. Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und
               Konsonantien <strong>Ich bin eine Hervorhebung</strong> die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des
               Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und
               versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene
               Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte
               beherrscht - ein geradezu unorthographisches Leben.</p>
       </div>
   </div>
</section>

<section class="page-section page-section--content">
   <div class="grid justify-content-center">
       <div class="col-desk-10 col-tab-5 col-mob-6">
           <h2 class="mw-lg-75">Ich bin eine Headline weit hinter den Bergen liegen Vokalien und Konsonaten</h2>
           <h3>Ich bin eine Subline weit hinter den Bergen liegen Vokalien und Konsonaten</h3>
           <p class="p3 mb-2 mb-lg-3">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die
               Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen
               Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den
               nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund
               fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein
               geradezu unorthographisches Leben. Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und
               Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des
               Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und
               versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene
               Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte
               beherrscht - ein geradezu unorthographisches Leben.</p>
       </div>
   </div>
</section>

<section class="page-section page-section--content">
   <div class="grid justify-content-center">
       <div class="col-desk-8 col-tab-6 col-mob-6 [modifier class]">
           <h1>Das sind wir</h1>
           <p class="p2 mb-0">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die
               Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik</p>
       </div>
   </div>
</section>

<section class="page-section page-section--content">
   <figure class="figure figure--ratio-9-3">
       <div class="figure__image">
           <img class="img-fluid w-100" src="/placeholder/image-slider-01.jpg" alt="">
       </div>
       <figcaption class="figure__caption f1">
           <div class="grid justify-content-center">
               <div class="col-desk-10 col-tab-5 col-mob-6">
                   <p class="f1 mb-0">Ich bin eine Bildunterschrift und ich bin optional und befinde mich 20px unter dem Bild. Wenn ich sehr lang bin werde ich nach 6 spalten zweizeilig.</p>
               </div>
           </div>
       </figcaption>
   </figure>
</section>

<section class="page-section page-section--content">
   <div class="grid justify-content-center">
       <div class="col-desk-10 col-tab-5 col-mob-6">
           <figure class="figure figure--ratio-5-3">
               <div class="figure__image">
                   <img class="img-fluid w-100" src="/placeholder/image-slider-01.jpg" alt="">
               </div>
               <figcaption class="figure__caption f1">Ich bin eine Bildunterschrift und ich bin optional und
                   befinde mich 20px unter dem Bild. Wenn ich sehr lang bin werde ich nach 6 spalten zweizeilig.
               </figcaption>
           </figure>
       </div>
   </div>
</section>

<section class="page-section page-section--content">
   <div class="grid justify-content-center">
       <div class="col-desk-10 col-tab-5 col-mob-6">
           <div class="figure-slider__container">
               <div class="swiper-container figure-slider figure-slider--three-items js--figure-slider" data-figure-slider="KYdoISQz">
                   <div class="swiper-wrapper figure-slider__wrapper">
                       <figure class="swiper-slide figure figure--ratio-3-4">
                           <div class="figure__image">
                               <img class="img-fluid w-100" src="/placeholder/image-slider-01.jpg" alt="">
                           </div>
                           <figcaption class="figure__caption f1">Ich bin eine Bildunterschrift und ich bin optional
                               und befinde mich 20px unter dem Bild. Wenn ich sehr lang bin werde ich nach 6 spalten
                               zweizeilig.
                           </figcaption>
                       </figure>
                       <figure class="swiper-slide figure figure--ratio-3-4">
                           <div class="figure__image">
                               <img class="img-fluid w-100" src="/placeholder/image-slider-01.jpg" alt="">
                           </div>
                           <figcaption class="figure__caption f1">Ich bin eine Bildunterschrift und ich bin optional
                               und befinde mich 20px unter dem Bild. Wenn ich sehr lang bin werde ich nach 6 spalten
                               zweizeilig.
                           </figcaption>
                       </figure>
                       <figure class="swiper-slide figure figure--ratio-3-4">
                           <div class="figure__image">
                               <img class="img-fluid w-100" src="/placeholder/image-slider-01.jpg" alt="">
                           </div>
                           <figcaption class="figure__caption f1">Ich bin eine Bildunterschrift und ich bin optional
                               und befinde mich 20px unter dem Bild. Wenn ich sehr lang bin werde ich nach 6 spalten
                               zweizeilig.
                           </figcaption>
                       </figure>
                   </div>
                   <div class="swiper-scrollbar"></div>
               </div>
               <p class="f1 mb-0 d-block d-lg-none">Ich bin eine Bildunterschrift und ich bin optional und befinde mich 20px
                   unter dem Bild. Ich bin eine Zusammenfassung der BUs beim der DT Variante.</p>
           </div>
       </div>
   </div>
</section>

<section class="page-section page-section--content">
   <div class="grid justify-content-center">
       <div class="col-desk-10 col-tab-5 col-mob-6">
           <div class="figure-slider__container">
               <div class="swiper-container figure-slider figure-slider--three-items js--figure-slider" data-figure-slider="KYdoISQz">
                   <div class="swiper-wrapper figure-slider__wrapper">
                       <figure class="swiper-slide figure figure--ratio-3-4">
                           <div class="figure__image">
                               <img class="img-fluid w-100" src="/placeholder/image-slider-01.jpg" alt="">
                           </div>
                           <figcaption class="figure__caption f1">Ich bin eine Bildunterschrift und ich bin optional
                               und befinde mich 20px unter dem Bild. Wenn ich sehr lang bin werde ich nach 6 spalten
                               zweizeilig.
                           </figcaption>
                       </figure>
                       <figure class="swiper-slide figure figure--ratio-3-4">
                           <div class="figure__image">
                               <img class="img-fluid w-100" src="/placeholder/image-slider-01.jpg" alt="">
                           </div>
                           <figcaption class="figure__caption f1">Ich bin eine Bildunterschrift und ich bin optional
                               und befinde mich 20px unter dem Bild. Wenn ich sehr lang bin werde ich nach 6 spalten
                               zweizeilig.
                           </figcaption>
                       </figure>
                       <figure class="swiper-slide figure figure--ratio-3-4">
                           <div class="figure__image">
                               <img class="img-fluid w-100" src="/placeholder/image-slider-01.jpg" alt="">
                           </div>
                           <figcaption class="figure__caption f1">Ich bin eine Bildunterschrift und ich bin optional
                               und befinde mich 20px unter dem Bild. Wenn ich sehr lang bin werde ich nach 6 spalten
                               zweizeilig.
                           </figcaption>
                       </figure>
                   </div>
                   <div class="swiper-scrollbar"></div>
               </div>
               <p class="f1 mb-0 d-block d-lg-none">Ich bin eine Bildunterschrift und ich bin optional und befinde mich 20px
                   unter dem Bild. Ich bin eine Zusammenfassung der BUs beim der DT Variante.</p>
           </div>
       </div>
   </div>
</section>