Stylebook

Nechte své peníze růst!

Ne má slovníků neustál k ohňové vyrůstal krystalů historky jízdu, během člun můj netopýry měly okouzlí samci vás šířili dá čaj dojíždí a čestná myší, OSN okem o fronty ke mimořádnými zásadní operace

Biologa tvar, opětovnému evoluci nejste

Ostrý věnována v ohrady

Ho loď opakovat aby čtyři doma sem i zatím už

Patentovanou léta opadavých s máme hubí tří dnešní dělat o starala

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!

Petr Hruboš CEO Taškahned.cz

Jak se dělá z kartonu taška Co je to karton?

        {% set content_sample %}
<p>
  <strong>Ne má slovníků neustál</strong>
  k ohňové vyrůstal krystalů historky jízdu, během člun můj netopýry měly okouzlí samci vás šířili dá čaj dojíždí a čestná myší, OSN okem o fronty ke mimořádnými zásadní
  <a href="#">operace</a>
</p>
<ul>
  <li>Biologa tvar, opětovnému evoluci nejste</li>
  <li>Ostrý věnována v ohrady</li>
  <li>Ho loď opakovat aby čtyři doma sem i zatím už</li>
  <li>Patentovanou léta opadavých s máme hubí tří dnešní dělat o starala</li>
</ul>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>
{% endset %}

{% include "@Components/sections/text-and-media-section/text-and-media-section.twig" with {props: {
  header: {
    heading: {
      title: "Nechte své peníze růst!"
    },
  },
  order: "default",
  media: [
    {
      img: {
        src: "https://i.imgur.com/5cvZzqk.jpeg",
      },
      video: {
        src: "https://youtu.be/kySGqoU7X-s",
      },
    }
  ],
  content: content_sample,
  author: {
    img: {
      src: "https://i.imgur.com/5cvZzqk.jpeg"
    },
    name: "Petr Hruboš",
    role: "CEO Taškahned.cz"
  },
  buttons: {
    primary: {
      title: "Jak se dělá z kartonu taška",
      url: "#",
      icon: {
        src: "@Images/svg/arrow-down-right.svg",
      }
    },
    secondary: {
      title: "Co je to karton?",
      url: "#",
      icon: {
        src: "@Images/svg/arrow-down-right.svg",
      }
    }
  }
}} %}

          



<section class="base-section  s-text-media --default">
  <div class="base-section__container container">
    
    <div class="s-text-media__grid d-flex flex-column gap-4">

      <div class="s-text-media__col --media-col w-100">
                  <div class="d-flex flex-column gap-2">
            <div class="i-media u-posr --video u-img-hover u-cursor-pointer" data-fancybox data-src="https://youtu.be/kySGqoU7X-s">
            <div class="img u-posr overflow-hidden --cover --placeholder --ratio-5-4 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="688" height="459" draggable="false">
  </picture>
</div>
      
      <div class="i-media__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-3 py-1 u-rounded-3">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion --xl">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </div>

                          <div class="u-posr s-text-media__decoration w-100">
                <div class="img u-posr overflow-hidden   --ratio-1-1 s-text-media__decoration-slogan u-posa u-top-50-p u-translate-middle-y">
  <picture>
    
    <img src="" data-src="/images/svg/slogan.svg" alt="" width="144" height="144" draggable="false">
  </picture>
</div>
              </div>
                      </div>
              </div><div class="s-text-media__col --content-col w-100 --has-author --has-buttons">

                  <header class="base-header d-flex flex-column gap-3 text-center align-items-center --left --spacing-sm s-text-media__header mt-2">

  
      <h2 class="base-heading mb-0 u-fw-700 u-h2">
            Nechte své peníze růst!
      </h2>
  
  
  
  

</header>
        
                  <div class="s-text-media__body entry-content u-clamp">
            <p>
  <strong>Ne má slovníků neustál</strong>
  k ohňové vyrůstal krystalů historky jízdu, během člun můj netopýry měly okouzlí samci vás šířili dá čaj dojíždí a čestná myší, OSN okem o fronty ke mimořádnými zásadní
  <a href="#">operace</a>
</p>
<ul>
  <li>Biologa tvar, opětovnému evoluci nejste</li>
  <li>Ostrý věnována v ohrady</li>
  <li>Ho loď opakovat aby čtyři doma sem i zatím už</li>
  <li>Patentovanou léta opadavých s máme hubí tří dnešní dělat o starala</li>
</ul>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>

          </div>
        
                  <div class="s-text-media__author d-flex gap-2 align-items-center mt-5">
            <div class="s-text-media__author-img">
              <div class="img u-posr overflow-hidden --cover --placeholder --ratio-1-1 u-rounded-full">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="64" height="64" draggable="false">
  </picture>
</div>
            </div>

            <div class="d-flex flex-column">
                              <span class="u-fw-600">
                  Petr Hruboš
                </span>
                                            <span class="u-color-text-400 u-fw-600">
                  CEO Taškahned.cz
                </span>
                          </div>

          </div>
        
        



  <div class="g-base flex-wrap --align-left --gap-md g-buttons flex-xl-nowrap">
  
              <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary      --full-width-mobile" href='#'>
      <span class="btn__title u-z-index-1">
      Jak se dělá z kartonu taška
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M15 12.317V5h-1.789v6.907L2.264 1 1 2.265 11.983 13.21H4.814V15h7.502A2.69 2.69 0 0 0 15 12.317Z"/></svg>      </span>
    </span>
  
  </a>
      
              <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline      --full-width-mobile" href='#'>
      <span class="btn__title u-z-index-1">
      Co je to karton?
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M15 12.317V5h-1.789v6.907L2.264 1 1 2.265 11.983 13.21H4.814V15h7.502A2.69 2.69 0 0 0 15 12.317Z"/></svg>      </span>
    </span>
  
  </a>
      
    </div>

      </div>

    </div>
    </div>
</section>

Méně je někdy více!

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!

Zjistit více

        {% set content_sample %}
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>

{% endset %}

{% include "@Components/sections/text-and-media-section/text-and-media-section.twig" with {props: {
  header: {
    heading: {
      title: "Méně je někdy více!"
    },
  },
  order: "reverse",
  media: [
    {
      img: {
        src: "https://i.imgur.com/5cvZzqk.jpeg",
      }
    },
    {
      img: {
        src: "https://i.imgur.com/uGOs8lN.jpeg",
      }
    },
    {
      img: {
        src: "https://i.imgur.com/5cvZzqk.jpeg",
      }
    }
  ],
  content: content_sample,
  buttons: {
    primary: {
      title: "Zjistit více",
      url: "#",
    },
  }
}} %}

          



<section class="base-section  s-text-media --reverse">
  <div class="base-section__container container">
    
    <div class="s-text-media__grid d-flex flex-column gap-4">

      <div class="s-text-media__col --media-col w-100">
                  <div class="s-text-media__media-row d-flex flex-column justify-content-between d-sm-grid gap-2">
            <div class="s-text-media__media-row-col">
              <div class="d-flex flex-column gap-2">
                <div class="i-media u-posr">
            <div class="img u-posr overflow-hidden --cover --placeholder --ratio-5-4 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="688" height="459" draggable="false">
  </picture>
</div>
      
  </div>

                                  <div class="u-posr s-text-media__decoration w-100">
                    <div class="img u-posr overflow-hidden   --ratio-1-1 s-text-media__decoration-slogan u-posa u-top-50-p u-translate-middle-y">
  <picture>
    
    <img src="" data-src="/images/svg/slogan.svg" alt="" width="144" height="144" draggable="false">
  </picture>
</div>
                  </div>
                              </div>
            </div>
            <div class="s-text-media__media-row-col">
              <div class="d-flex flex-sm-column gap-2 justify-content-between">
                                  <div class="i-media u-posr  --vertical">
            <div class="img u-posr overflow-hidden --cover --placeholder --ratio-4-5 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/uGOs8lN.jpeg" alt="" width="184" height="230" draggable="false">
  </picture>
</div>
      
  </div>
                                  <div class="i-media u-posr  --vertical">
            <div class="img u-posr overflow-hidden --cover --placeholder --ratio-4-5 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="184" height="230" draggable="false">
  </picture>
</div>
      
  </div>
                              </div>
            </div>
          </div>
              </div><div class="s-text-media__col --content-col w-100  --has-buttons">

                  <header class="base-header d-flex flex-column gap-3 text-center align-items-center --left --spacing-sm s-text-media__header mt-2">

  
      <h2 class="base-heading mb-0 u-fw-700 u-h2">
            Méně je někdy více!
      </h2>
  
  
  
  

</header>
        
                  <div class="s-text-media__body entry-content u-clamp">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>


          </div>
        
        
        



  <div class="g-base flex-wrap --align-left --gap-md g-buttons flex-xl-nowrap">
  
              <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary      --full-width-mobile" href='#'>
      <span class="btn__title u-z-index-1">
      Zjistit více
    </span>
      
  
  </a>
      
      
    </div>

      </div>

    </div>
    </div>
</section>

Méně je někdy více!

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!

Petr Hruboš CEO Taškahned.cz

        {% set content_sample %}
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>

{% endset %}

{% include "@Components/sections/text-and-media-section/text-and-media-section.twig" with {props: {
  header: {
    heading: {
      title: "Méně je někdy více!"
    },
  },
  media: [
    {
      img: {
        src: "https://i.imgur.com/5cvZzqk.jpeg",
      }
    },
    {
      img: {
        src: "https://i.imgur.com/uGOs8lN.jpeg",
      }
    },
    {
      img: {
        src: "https://i.imgur.com/uGOs8lN.jpeg",
      }
    },
  ],
  content: content_sample,
  author: {
    img: {
      src: "https://i.imgur.com/5cvZzqk.jpeg"
    },
    name: "Petr Hruboš",
    role: "CEO Taškahned.cz"
  },
}} %}

          



<section class="base-section  s-text-media --default">
  <div class="base-section__container container">
    
    <div class="s-text-media__grid d-flex flex-column gap-4">

      <div class="s-text-media__col --media-col w-100">
                  <div class="s-text-media__media-row d-flex flex-column justify-content-between d-sm-grid gap-2">
            <div class="s-text-media__media-row-col">
              <div class="d-flex flex-column gap-2">
                <div class="i-media u-posr">
            <div class="img u-posr overflow-hidden --cover --placeholder --ratio-5-4 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="688" height="459" draggable="false">
  </picture>
</div>
      
  </div>

                                  <div class="u-posr s-text-media__decoration w-100">
                    <div class="img u-posr overflow-hidden   --ratio-1-1 s-text-media__decoration-slogan u-posa u-top-50-p u-translate-middle-y">
  <picture>
    
    <img src="" data-src="/images/svg/slogan.svg" alt="" width="144" height="144" draggable="false">
  </picture>
</div>
                  </div>
                              </div>
            </div>
            <div class="s-text-media__media-row-col">
              <div class="d-flex flex-sm-column gap-2 justify-content-between">
                                  <div class="i-media u-posr  --vertical">
            <div class="img u-posr overflow-hidden --cover --placeholder --ratio-4-5 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/uGOs8lN.jpeg" alt="" width="184" height="230" draggable="false">
  </picture>
</div>
      
  </div>
                                  <div class="i-media u-posr  --vertical">
            <div class="img u-posr overflow-hidden --cover --placeholder --ratio-4-5 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/uGOs8lN.jpeg" alt="" width="184" height="230" draggable="false">
  </picture>
</div>
      
  </div>
                              </div>
            </div>
          </div>
              </div><div class="s-text-media__col --content-col w-100 --has-author">

                  <header class="base-header d-flex flex-column gap-3 text-center align-items-center --left --spacing-sm s-text-media__header mt-2">

  
      <h2 class="base-heading mb-0 u-fw-700 u-h2">
            Méně je někdy více!
      </h2>
  
  
  
  

</header>
        
                  <div class="s-text-media__body entry-content u-clamp">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>


          </div>
        
                  <div class="s-text-media__author d-flex gap-2 align-items-center mt-5">
            <div class="s-text-media__author-img">
              <div class="img u-posr overflow-hidden --cover --placeholder --ratio-1-1 u-rounded-full">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="64" height="64" draggable="false">
  </picture>
</div>
            </div>

            <div class="d-flex flex-column">
                              <span class="u-fw-600">
                  Petr Hruboš
                </span>
                                            <span class="u-color-text-400 u-fw-600">
                  CEO Taškahned.cz
                </span>
                          </div>

          </div>
        
        




      </div>

    </div>
    </div>
</section>

Méně je někdy více!

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!

        {% set content_sample %}
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>

{% endset %}

{% include "@Components/sections/text-and-media-section/text-and-media-section.twig" with {props: {
  header: {
    heading: {
      title: "Méně je někdy více!"
    },
  },
  media: [
    {
      img: {
        src: "https://i.imgur.com/5cvZzqk.jpeg",
      }
    },
  ],
  content: content_sample,
}} %}

          



<section class="base-section  s-text-media --default">
  <div class="base-section__container container">
    
    <div class="s-text-media__grid d-flex flex-column gap-4">

      <div class="s-text-media__col --media-col w-100">
                  <div class="d-flex flex-column gap-2">
            <div class="i-media u-posr">
            <div class="img u-posr overflow-hidden --cover --placeholder --ratio-5-4 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="688" height="459" draggable="false">
  </picture>
</div>
      
  </div>

                          <div class="u-posr s-text-media__decoration w-100">
                <div class="img u-posr overflow-hidden   --ratio-1-1 s-text-media__decoration-slogan u-posa u-top-50-p u-translate-middle-y">
  <picture>
    
    <img src="" data-src="/images/svg/slogan.svg" alt="" width="144" height="144" draggable="false">
  </picture>
</div>
              </div>
                      </div>
              </div><div class="s-text-media__col --content-col w-100">

                  <header class="base-header d-flex flex-column gap-3 text-center align-items-center --left --spacing-sm s-text-media__header mt-2">

  
      <h2 class="base-heading mb-0 u-fw-700 u-h2">
            Méně je někdy více!
      </h2>
  
  
  
  

</header>
        
                  <div class="s-text-media__body entry-content u-clamp">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium consequuntur minus ad fugit! Error nostrum ratione nihil. Ut illo, quo voluptatum facilis aspernatur iste quam nulla magnam porro culpa in!</p>


          </div>
        
        
        




      </div>

    </div>
    </div>
</section>

Text and media section

One image with text, author and buttons

Nechte své peníze růst!

Three images with text and button

Méně je někdy více!

Three images with text and author

Méně je někdy více!

One image with text

Méně je někdy více!