• Posts section grid title

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?

    Read more Another one 
  •         {% include "@Components/sections/posts-grid-section/posts-grid-section.twig" with {props: {
  header: {
    title: "Posts section grid title",
    perex: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?",
  },
  buttons: {
    primary: {
      title: "Read more"
    },
    secondary: {
      title: "Another one"
    }
  },
  posts: [
    {
      title: "I went to fashion week in the metaverse",
      img: {
        src: "https://source.unsplash.com/688x459/?fashion",
        srcset: [
          "https://source.unsplash.com/688x459/?fashion 1x",
          "https://source.unsplash.com/1376x918/?fashion 2x"
        ],
        ratio: "3-2"
      },
      tags: [
        "Fashion",
        "Inspiration"
      ],
      perex: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
      date: "26.3. 2021"
    },
    {
      title: "Was this the worst night in Oscars fashion history?",
      img: {
        src: "https://source.unsplash.com/208x140/?clothes",
        srcset: [
          "https://source.unsplash.com/208x140/?clothes 1x",
          "https://source.unsplash.com/416x280/?clothes 2x"
        ],
        ratio: "3-2"
      },
      tags: [
        "Shopping",
        "Inspiration",
        "Tips"
      ],
      perex: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
      date: "17.11. 2021"
    },
    {
      title: "In pictures: Photography contest turns lens on life in China",
      img: {
        src: "https://source.unsplash.com/208x140/?clothing",
        ratio: "3-2"
      },
      tags: [
        "Shopping",
        "Inspiration",
        "Tips"
      ],
      perex: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
      date: "3.2. 2019"
    },
    {
      title: "Can seaweed help solve the world's plastic crisis?",
      img: {
        src: "https://source.unsplash.com/208x140/?jacket",
        ratio: "3-2"
      },
      tags: [
        "Shopping",
        "Inspiration",
        "Tips"
      ],
      perex: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
      date: "12.12. 2022"
    },
  ]
}} %}

      
  •           


<section class="base-section   s-posts-grid">
  <div class="base-section__container container">
    <div class="base-section__content-wrapper">
      
    <header class="base-header">
  <h2 class="base-heading base-h2">Posts section grid title</h2>

      <p class="base-header__paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?</p>
  </header>

    <div class="s-posts-grid__grid">
              <div class="s-posts-grid__grid-cell"><article class="i-post --column">
  <div class="i-post__image-col">

    <div class="i-post__image">
      <a href="#" class="i-post-image-link u-img-hover">
        <div class="img   --ratio-3-2">
  <picture>
    
    <img src="" data-src="https://source.unsplash.com/688x459/?fashion" alt="" draggable="false" srcset="" data-srcset="https://source.unsplash.com/688x459/?fashion 1x, https://source.unsplash.com/1376x918/?fashion 2x">
  </picture>
</div>
      </a>
    </div>

  </div>

  <div class="i-post__content-col">

    <div class="i-post__content">

      <header class="i-post__header">
        <h3 class="i-post__heading">
          <a href="#" title="I went to fashion week in the metaverse" class="i-post__heading-link">I went to fashion week in the metaverse</a>
        </h3>
                  <p class="i-post__perex">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
              </header>

              <div class="g-tags g-base">
      <span class="i-tag">Fashion</span>
      <span class="i-tag">Inspiration</span>
  </div>
      
      <footer class="i-post__footer">

                  <div class="i-post__date">
            <span class="icon">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3l-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg></span>
            <span>
              26.3. 2021
            </span>
          </div>
        
        <a class="link --black  --animation-right" href="#">
  <span class="link__title">Read more</span>

      <div class="link__icon">
      <span class="icon  --sm">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg></span>
    </div>
  </a>
      </footer>

    </div>

  </div>

</article>
        </div>
                    <div class="s-posts-grid__grid-cell">
          <article class="i-post">
  <div class="i-post__image-col">

    <div class="i-post__image">
      <a href="#" class="i-post-image-link u-img-hover">
        <div class="img   --ratio-3-2">
  <picture>
    
    <img src="" data-src="https://source.unsplash.com/208x140/?clothes" alt="" draggable="false" srcset="" data-srcset="https://source.unsplash.com/208x140/?clothes 1x, https://source.unsplash.com/416x280/?clothes 2x">
  </picture>
</div>
      </a>
    </div>

  </div>

  <div class="i-post__content-col">

    <div class="i-post__content">

      <header class="i-post__header">
        <h3 class="i-post__heading">
          <a href="#" title="Was this the worst night in Oscars fashion history?" class="i-post__heading-link">Was this the worst night in Oscars fashion history?</a>
        </h3>
                  <p class="i-post__perex">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
              </header>

              <div class="g-tags g-base">
      <span class="i-tag">Shopping</span>
      <span class="i-tag">Inspiration</span>
      <span class="i-tag">Tips</span>
  </div>
      
      <footer class="i-post__footer">

                  <div class="i-post__date">
            <span class="icon">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3l-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg></span>
            <span>
              17.11. 2021
            </span>
          </div>
        
        <a class="link --black  --animation-right" href="#">
  <span class="link__title">Read more</span>

      <div class="link__icon">
      <span class="icon  --sm">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg></span>
    </div>
  </a>
      </footer>

    </div>

  </div>

</article>
        </div>
              <div class="s-posts-grid__grid-cell">
          <article class="i-post">
  <div class="i-post__image-col">

    <div class="i-post__image">
      <a href="#" class="i-post-image-link u-img-hover">
        <div class="img   --ratio-3-2">
  <picture>
    
    <img src="" data-src="https://source.unsplash.com/208x140/?clothing" alt="" draggable="false">
  </picture>
</div>
      </a>
    </div>

  </div>

  <div class="i-post__content-col">

    <div class="i-post__content">

      <header class="i-post__header">
        <h3 class="i-post__heading">
          <a href="#" title="In pictures: Photography contest turns lens on life in China" class="i-post__heading-link">In pictures: Photography contest turns lens on life in China</a>
        </h3>
                  <p class="i-post__perex">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
              </header>

              <div class="g-tags g-base">
      <span class="i-tag">Shopping</span>
      <span class="i-tag">Inspiration</span>
      <span class="i-tag">Tips</span>
  </div>
      
      <footer class="i-post__footer">

                  <div class="i-post__date">
            <span class="icon">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3l-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg></span>
            <span>
              3.2. 2019
            </span>
          </div>
        
        <a class="link --black  --animation-right" href="#">
  <span class="link__title">Read more</span>

      <div class="link__icon">
      <span class="icon  --sm">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg></span>
    </div>
  </a>
      </footer>

    </div>

  </div>

</article>
        </div>
              <div class="s-posts-grid__grid-cell">
          <article class="i-post">
  <div class="i-post__image-col">

    <div class="i-post__image">
      <a href="#" class="i-post-image-link u-img-hover">
        <div class="img   --ratio-3-2">
  <picture>
    
    <img src="" data-src="https://source.unsplash.com/208x140/?jacket" alt="" draggable="false">
  </picture>
</div>
      </a>
    </div>

  </div>

  <div class="i-post__content-col">

    <div class="i-post__content">

      <header class="i-post__header">
        <h3 class="i-post__heading">
          <a href="#" title="Can seaweed help solve the world's plastic crisis?" class="i-post__heading-link">Can seaweed help solve the world's plastic crisis?</a>
        </h3>
                  <p class="i-post__perex">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
              </header>

              <div class="g-tags g-base">
      <span class="i-tag">Shopping</span>
      <span class="i-tag">Inspiration</span>
      <span class="i-tag">Tips</span>
  </div>
      
      <footer class="i-post__footer">

                  <div class="i-post__date">
            <span class="icon">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3l-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg></span>
            <span>
              12.12. 2022
            </span>
          </div>
        
        <a class="link --black  --animation-right" href="#">
  <span class="link__title">Read more</span>

      <div class="link__icon">
      <span class="icon  --sm">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg></span>
    </div>
  </a>
      </footer>

    </div>

  </div>

</article>
        </div>
          </div>

          <div class="g-buttons g-base --center">
                        <a class="btn --primary   --animation-right" href='#'>    <span class="btn__title">Read more</span>
  
      <span class="btn__icon">

      <span class="icon">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg></span>
    </span>
  </a>
                                <a class="btn --outline  --icon-before --animation-zoom" href='#'>    <span class="btn__title">Another one</span>
  
      <span class="btn__icon">

      <span class="icon">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3l-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg></span>
    </span>
  </a>
                  </div>
    
      </div>
  </div>
</section>

Schema