{% extends 'templates/layouts/page.njk' %}

{% set pageProps = {
  h1: 'Text & Media'
} %}

{% block content %}
  {% call ContentSection({
    title: 'Text & picture (click enlargement)'
  }) %}
    {% call TextAndMediaBuilder.TextAndMedia({
      mediaAlign: 'above',
      medias: [[
        {
          caption: '© Donec sed erat ut magna suscipit mattis. Aliquam era',
          media: TextAndMediaBuilder.image1360x765
        },
        {
          caption: '© author name',
          media: TextAndMediaBuilder.image664x374
        }
      ]]
    }) %}
      <p>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu luctus lorem</p>
      <p>sodales.Ut dignissim ante ac augue vulputate tristique. Mauris venenatis tincidunt nibh, sit amet fringilla augue malesuada a. Mauris a nunc congue, viverra lectus sed, imperdiet quam. Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh. Donec condimentum posuere nunc, et hendrerit sapien dictum ut. Aliquam congue non purus eu suscipit. Integer eu dui tortor. Donec ut dolor vitae ipsum ultrices semper.</p>
      <p>Morbi imperdiet dictum urna nec blandit. Curabitur interdum diam ut porta vulputate. Fusce ultrices efficitur lectus et ornare. Morbi vulputate condimentum metus eu viverra. Integer iaculis volutpat lobortis. In dapibus massa at molestie ultricies. Nunc vitae gravida ipsum, euismod euismod nulla. Morbi at nibh ut orci fringilla luctus. Nunc diam dolor, posuere a venenatis et, venenatis nec augue. Phasellus tempus mauris non metus placerat, id consectetur quam porta. Proin pulvinar consequat urna, et porttitor leo maximus sed. Ut condimentum massa ut turpis consectetur aliquam. Maecenas vehicula magna quis malesuada feugiat. Fusce pharetra eros id odio vestibulum, quis mollis est tempor. Etiam sed purus orci. Nullam sit amet tortor eget.ce pharetra eros id odio vestibulum, quis mollis est tempor. Etiam sed purus orci. Nullam sit amet tortor eget.</p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection({
    title: 'Image in the text on the right'
  }) %}
    {% call TextAndMediaBuilder.TextAndMedia({
      mediaAlign: 'right',
      useFancybox: false,
      medias: [
        [
          {
            caption: '© Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsanDonec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec',
            media: TextAndMediaBuilder.image664x374
          }
        ]
      ]
    }) %}
      <p>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu luctus lorem</p>
      <p>sodales.Ut dignissim ante ac augue vulputate tristique. Mauris venenatis tincidunt nibh, sit amet fringilla
        augue malesuada a. Mauris a nunc congue, viverra lectus sed, imperdiet quam. Aenean tempor sem sed lorem ultriciem. Aenean tempor sem sed lorem ultricie Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu luctus lorem</p>
      <p>sodales.Ut dignissim ante ac augue vulputate tristique. Mauris venenatis tincidunt nibh, sit amet fringilla augue malesuada a. Mauris a nunc congue, viverra lectus sed, imperdiet quam. Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh. Donec condimentum posuere nunc, et hendrerit sapien dictum ut. Aliquam congue non purus eu suscipit. Integer eu dui tortor. Donec ut dolor vitae ipsum ultrices semper.</p>
      <p>Morbi imperdiet dictum urna nec blandit. Curabitur interdum diam ut porta vulputate. Fusce ultrices efficitur lectus et ornare. Morbi vulputate condimentum metus eu viverra. Integer iaculis volutpat lobortis. In dapibus massa at molestie ultricies. Nunc vitae gravida ipsum, euismod euismod nulla. Morbi at nibh ut orci fringilla luctus. Nunc diam dolor, posuere a venenatis et, venenatis nec augue. Phasellus tempus mauris non metus placerat, id consectetur quam porta. Proin pulvinar consequat urna, et porttitor leo maximus sed. Ut condimentum massa ut turpis consectetur aliquam. Maecenas vehicula magna quis malesuada feugiat. Fusce pharetra eros id odio vestibulum, quis mollis est tempor. Etiam sed purus orci. Nullam sit amet tortor eget.</p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection({
    title: 'Image in the text on the left'
  }) %}
    {% call TextAndMediaBuilder.TextAndMedia({
      mediaAlign: 'left',
      useFancybox: false,
      medias: [
        [
          {
            caption: '© Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsanDonec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec',
            media: TextAndMediaBuilder.image664x374
          }
        ]
      ]
    }) %}
      <p>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu luctus lorem</p>
      <p>sodales.Ut dignissim ante ac augue vulputate tristique. Mauris venenatis tincidunt nibh, sit amet fringilla
        augue malesuada a. Mauris a nunc congue, viverra lectus sed, imperdiet quam. Aenean tempor sem sed lorem ultriciem. Aenean tempor sem sed lorem ultricie Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu luctus lorem</p>
      <p>sodales.Ut dignissim ante ac augue vulputate tristique. Mauris venenatis tincidunt nibh, sit amet fringilla augue malesuada a. Mauris a nunc congue, viverra lectus sed, imperdiet quam. Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh. Donec condimentum posuere nunc, et hendrerit sapien dictum ut. Aliquam congue non purus eu suscipit. Integer eu dui tortor. Donec ut dolor vitae ipsum ultrices semper.</p>
      <p>Morbi imperdiet dictum urna nec blandit. Curabitur interdum diam ut porta vulputate. Fusce ultrices efficitur lectus et ornare. Morbi vulputate condimentum metus eu viverra. Integer iaculis volutpat lobortis. In dapibus massa at molestie ultricies. Nunc vitae gravida ipsum, euismod euismod nulla. Morbi at nibh ut orci fringilla luctus. Nunc diam dolor, posuere a venenatis et, venenatis nec augue. Phasellus tempus mauris non metus placerat, id consectetur quam porta. Proin pulvinar consequat urna, et porttitor leo maximus sed. Ut condimentum massa ut turpis consectetur aliquam. Maecenas vehicula magna quis malesuada feugiat. Fusce pharetra eros id odio vestibulum, quis mollis est tempor. Etiam sed purus orci. Nullam sit amet tortor eget.</p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection() %}
    {% call TextAndMediaBuilder.TextAndMedia({
      noWrap: true,
      mediaAlign: 'right',
      useFancybox: false,
      medias: [[
        {
          caption: '© Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsanDonec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec',
          media: TextAndMediaBuilder.image664x374
        }
      ]]
    }) %}
      <h2>Image to the right of the text</h2>
      <p>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu luctus lorem</p>
      <p>sodales.Ut dignissim ante ac augue vulputate tristique. Mauris venenatis tincidunt nibh, sit amet fringilla augue malesuada a. Mauris a nunc congue, viverra lectus sed, imperdiet quam. Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh. Donec condimentum posuere nunc, et hendrerit sapien dictum ut. Aliquam congue non purus eu suscipit. Integer eu dui tortor. Donec ut dolor vitae ipsum ultrices semper.</p>
      <p>Morbi imperdiet dictum urna nec blandit. Curabitur interdum diam ut porta vulputate. Fusce ultrices efficitur lectus et ornare. Morbi vulputate condimentum</p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection() %}
    {% call TextAndMediaBuilder.TextAndMedia({
      noWrap: true,
      mediaAlign: 'left',
      useFancybox: false,
      medias: [[
        {
          caption: '© Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsanDonec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec',
          media: TextAndMediaBuilder.image664x374
        }
      ]]
    }) %}
      <h2>Image to the left of the text</h2>
      <p>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu luctus lorem</p>
      <p>sodales.Ut dignissim ante ac augue vulputate tristique. Mauris venenatis tincidunt nibh, sit amet fringilla augue malesuada a. Mauris a nunc congue, viverra lectus sed, imperdiet quam. Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh. Donec condimentum posuere nunc, et hendrerit sapien dictum ut. Aliquam congue non purus eu suscipit. Integer eu dui tortor. Donec ut dolor vitae ipsum ultrices semper.</p>
      <p>Morbi imperdiet dictum urna nec blandit. Curabitur interdum diam ut porta vulputate. Fusce ultrices efficitur lectus et ornare. Morbi vulputate condimentum</p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection({
    title: 'Image over text'
  }) %}
    {% call TextAndMediaBuilder.TextAndMedia({
      mediaAlign: 'above',
      useFancybox: false,
      medias: [[
        {
          caption: '©Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsanDonec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsan',
          media: TextAndMediaBuilder.image1360x765
        }
      ]]
    }) %}
      <p>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu luctus lorem</p>
      <p>sodales.Ut dignissim ante ac augue vulputate tristique. Mauris venenatis tincidunt nibh, sit amet fringilla augue malesuada a. Mauris a nunc congue, viverra lectus sed, imperdiet quam. Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh. Donec condimentum posuere nunc, et hendrerit sapien dictum ut. Aliquam congue non purus eu suscipit. Integer eu dui tortor. Donec ut dolor vitae ipsum ultrices semper.</p>
      <p>Morbi imperdiet dictum urna nec blandit. Curabitur interdum diam ut porta vulputate. Fusce ultrices efficitur lectus et ornare. Morbi vulputate condimentum metus eu viverra. Integer iaculis volutpat lobortis. In dapibus massa at molestie ultricies. Nunc vitae gravida ipsum, euismod euismod nulla. Morbi at nibh ut orci fringilla luctus. Nunc diam dolor, posuere a venenatis et, venenatis nec augue. Phasellus tempus mauris non metus placerat, id consectetur quam porta. Proin pulvinar consequat urna, et porttitor leo maximus sed. Ut condimentum massa ut turpis consectetur aliquam. Maecenas vehicula magna quis malesuada feugiat. Fusce pharetra eros id odio vestibulum, quis mollis est tempor. Etiam sed purus orci. Nullam sit amet tortor eget.</p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection({
    title: 'Image under text'
  }) %}
    {% call TextAndMediaBuilder.TextAndMedia({
      mediaAlign: 'below',
      useFancybox: false,
      medias: [[
        {
          caption: '©Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsanDonec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsan',
          media: TextAndMediaBuilder.image1360x765
        }
      ]]
    }) %}
      <p>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu luctus lorem</p>
      <p>sodales.Ut dignissim ante ac augue vulputate tristique. Mauris venenatis tincidunt nibh, sit amet fringilla augue malesuada a. Mauris a nunc congue, viverra lectus sed, imperdiet quam. Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh. Donec condimentum posuere nunc, et hendrerit sapien dictum ut. Aliquam congue non purus eu suscipit. Integer eu dui tortor. Donec ut dolor vitae ipsum ultrices semper.</p>
      <p>Morbi imperdiet dictum urna nec blandit. Curabitur interdum diam ut porta vulputate. Fusce ultrices efficitur lectus et ornare. Morbi vulputate condimentum metus eu viverra. Integer iaculis volutpat lobortis. In dapibus massa at molestie ultricies. Nunc vitae gravida ipsum, euismod euismod nulla. Morbi at nibh ut orci fringilla luctus. Nunc diam dolor, posuere a venenatis et, venenatis nec augue. Phasellus tempus mauris non metus placerat, id consectetur quam porta. Proin pulvinar consequat urna, et porttitor leo maximus sed. Ut condimentum massa ut turpis consectetur aliquam. Maecenas vehicula magna quis malesuada feugiat. Fusce pharetra eros id odio vestibulum, quis mollis est tempor. Etiam sed purus orci. Nullam sit amet tortor eget.</p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection({
    title: 'Smaller image (25%) in the text on the right'
  }) %}
    {% call TextAndMediaBuilder.TextAndMedia({
      mediaAlign: 'right',
      useFancybox: false,
      mediaWidth: '25',
      medias: [[
        {
          caption: '© Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsanDonec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec',
          media: TextAndMediaBuilder.image340x227
        }
      ]]
    }) %}
      <p>Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam ligula lacus, ultricies at
        cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu luctus lorem
      </p>
      <p>sodales.Ut dignissim ante ac augue vulputate tristique. Mauris venenatis tincidunt nibh, sit amet fringilla augue malesuada a. Mauris a nunc congue, viverra lectus
        sed, imperdiet quam. Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh. Donec condimentum posuere nunc, et hendrerit sapien dictum ut. Aliquam
        congue non purus eu suscipit. Integer eu dui tortor. Donec ut dolor vitae ipsum ultrices semper.
      </p>
      <p>Morbi imperdiet dictum urna nec blandit. Curabitur Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius
        risus tristique a. Etiam ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu
        luctus lorem
      </p>
      <p>sodales.Ut dignissim ante ac augue vulputate tristique. Mauris venenatis tincidunt nibh, sit amet fringilla augue malesuada a. Mauris a nunc congue, viverra lectus
        sed, imperdiet quam. Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor n
      </p>
      <p>Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam ligula lacus, ultricies at
        cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu luctus lorem
      </p>
      <p>
        sodales.Ut dignissim ante ac augue vul putate tristi que. Mauris venenatis tincidunt nibh, sit amet fringilla augue malesuada a. Mauris a nunc congue, viverra lectus
        sed, imperdiet quam. Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh. Donec condimentum posuere nunc, et hendrerit sapien dictum ut. Aliquam
        congue non purus eu suscipit. Integer eu dui tortor. Donec ut dolor vitae ipsum ultrices semper.
      </p>
      <p>Morbi imperdiet dictum urna nec blandit. Curabitur</p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection({
    title: 'Smaller image (25%) in the text on the left'
  }) %}
    {% call TextAndMediaBuilder.TextAndMedia({
      mediaAlign: 'left',
      mediaWidth: '25',
      useFancybox: false,
      medias: [[
        {
          caption: '© Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsanDonec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec',
          media: TextAndMediaBuilder.image340x227
        }
      ]]
    }) %}
      <p>Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam ligula lacus, ultricies at
        cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu luctus lorem
      </p>
      <p>sodales.Ut dignissim ante ac augue vulputate tristique. Mauris venenatis tincidunt nibh, sit amet fringilla augue malesuada a. Mauris a nunc congue, viverra lectus
        sed, imperdiet quam. Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh. Donec condimentum posuere nunc, et hendrerit sapien dictum ut. Aliquam
        congue non purus eu suscipit. Integer eu dui tortor. Donec ut dolor vitae ipsum ultrices semper.
      </p>
      <p>Morbi imperdiet dictum urna nec blandit. Curabitur Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius
        risus tristique a. Etiam ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu
        luctus lorem
      </p>
      <p>sodales.Ut dignissim ante ac augue vulputate tristique. Mauris venenatis tincidunt nibh, sit amet fringilla augue malesuada a. Mauris a nunc congue, viverra lectus
        sed, imperdiet quam. Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor n
      </p>
      <p>Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam ligula lacus, ultricies at
        cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu luctus lorem
      </p>
      <p>
        sodales.Ut dignissim ante ac augue vul putate tristi que. Mauris venenatis tincidunt nibh, sit amet fringilla augue malesuada a. Mauris a nunc congue, viverra lectus
        sed, imperdiet quam. Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh. Donec condimentum posuere nunc, et hendrerit sapien dictum ut. Aliquam
        congue non purus eu suscipit. Integer eu dui tortor. Donec ut dolor vitae ipsum ultrices semper.
      </p>
      <p>Morbi imperdiet dictum urna nec blandit. Curabitur</p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection({
    title: 'Smaller image (33%) in the text on the right'
  }) %}
    {% call TextAndMediaBuilder.TextAndMedia({
      mediaAlign: 'right',
      mediaWidth: '33',
      useFancybox: false,
      medias: [[
        {
          caption: '© Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsanDonec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec',
          media: TextAndMediaBuilder.image455x304
        }
      ]]
    }) %}
      <p>Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam ligula lacus, ultricies at
        cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu luctus lorem
      </p>
      <p>sodales.Ut dignissim ante ac augue vulputate tristique. Mauris venenatis tincidunt nibh, sit amet fringilla augue malesuada a. Mauris a nunc congue, viverra lectus
        sed, imperdiet quam. Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh. Donec condimentum posuere nunc, et hendrerit sapien dictum ut. Aliquam
        congue non purus eu suscipit. Integer eu dui tortor. Donec ut dolor vitae ipsum ultrices semper.
      </p>
      <p>Morbi imperdiet dictum urna nec blandit. Curabitur Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius
        risus tristique a. Etiam ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu
        luctus lorem
      </p>
      <p>sodales.Ut dignissim ante ac augue vulputate tristique. Mauris venenatis tincidunt nibh, sit amet fringilla augue malesuada a. Mauris a nunc congue, viverra lectus
        sed, imperdiet quam. Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor n
      </p>
      <p>Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam ligula lacus, ultricies at
        cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu luctus lorem
      </p>
      <p>
        sodales.Ut dignissim ante ac augue vul putate tristi que. Mauris venenatis tincidunt nibh, sit amet fringilla augue malesuada a. Mauris a nunc congue, viverra lectus
        sed, imperdiet quam. Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh. Donec condimentum posuere nunc, et hendrerit sapien dictum ut. Aliquam
        congue non purus eu suscipit. Integer eu dui tortor. Donec ut dolor vitae ipsum ultrices semper.
      </p>
      <p>Morbi imperdiet dictum urna nec blandit. Curabitur</p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection({
    title: 'Smaller image (33%) in the text on the left'
  }) %}
    {% call TextAndMediaBuilder.TextAndMedia({
      mediaAlign: 'left',
      mediaWidth: '33',
      useFancybox: false,
      medias: [[
        {
          caption: '© Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsanDonec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec',
          media: TextAndMediaBuilder.image455x304
        }
      ]]
    }) %}
      <p>Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam ligula lacus, ultricies at
        cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu luctus lorem
      </p>
      <p>sodales.Ut dignissim ante ac augue vulputate tristique. Mauris venenatis tincidunt nibh, sit amet fringilla augue malesuada a. Mauris a nunc congue, viverra lectus
        sed, imperdiet quam. Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh. Donec condimentum posuere nunc, et hendrerit sapien dictum ut. Aliquam
        congue non purus eu suscipit. Integer eu dui tortor. Donec ut dolor vitae ipsum ultrices semper.
      </p>
      <p>Morbi imperdiet dictum urna nec blandit. Curabitur Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius
        risus tristique a. Etiam ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu
        luctus lorem
      </p>
      <p>sodales.Ut dignissim ante ac augue vulputate tristique. Mauris venenatis tincidunt nibh, sit amet fringilla augue malesuada a. Mauris a nunc congue, viverra lectus
        sed, imperdiet quam. Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor n
      </p>
      <p>Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam ligula lacus, ultricies at
        cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu luctus lorem
      </p>
      <p>
        sodales.Ut dignissim ante ac augue vul putate tristi que. Mauris venenatis tincidunt nibh, sit amet fringilla augue malesuada a. Mauris a nunc congue, viverra lectus
        sed, imperdiet quam. Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh. Donec condimentum posuere nunc, et hendrerit sapien dictum ut. Aliquam
        congue non purus eu suscipit. Integer eu dui tortor. Donec ut dolor vitae ipsum ultrices semper.
      </p>
      <p>Morbi imperdiet dictum urna nec blandit. Curabitur</p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection({
    title: 'Image in the text on the right SVG'
  }) %}
    {% call TextAndMediaBuilder.TextAndMedia({
      mediaAlign: 'right',
      useFancybox: false,
      medias: [[
        {
          caption: '© Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsanDonec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec',
          media: {
            image: {
              src: './dummy.svg',
              width: 644,
              height: 'auto'
            },
            sources: []
          }
        }
      ]]
    }) %}
      <p>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu luctus lorem</p>
      <p>sodales.Ut dignissim ante ac augue vulputate tristique. Mauris venenatis tincidunt nibh, sit amet fringilla
        augue malesuada a. Mauris a nunc congue, viverra lectus sed, imperdiet quam. Aenean tempor sem sed lorem ultriciem. Aenean tempor sem sed lorem ultricie Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet diam a mollis. In finibus purus sed tortor fringilla, eu luctus lorem</p>
      <p>sodales.Ut dignissim ante ac augue vulputate tristique. Mauris venenatis tincidunt nibh, sit amet fringilla augue malesuada a. Mauris a nunc congue, viverra lectus sed, imperdiet quam. Aenean tempor sem sed lorem ultricies lacinia. Sed sit amet tortor nibh. Donec condimentum posuere nunc, et hendrerit sapien dictum ut. Aliquam congue non purus eu suscipit. Integer eu dui tortor. Donec ut dolor vitae ipsum ultrices semper.</p>
      <p>Morbi imperdiet dictum urna nec blandit. Curabitur interdum diam ut porta vulputate. Fusce ultrices efficitur lectus et ornare. Morbi vulputate condimentum metus eu viverra. Integer iaculis volutpat lobortis. In dapibus massa at molestie ultricies. Nunc vitae gravida ipsum, euismod euismod nulla. Morbi at nibh ut orci fringilla luctus. Nunc diam dolor, posuere a venenatis et, venenatis nec augue. Phasellus tempus mauris non metus placerat, id consectetur quam porta. Proin pulvinar consequat urna, et porttitor leo maximus sed. Ut condimentum massa ut turpis consectetur aliquam. Maecenas vehicula magna quis malesuada feugiat. Fusce pharetra eros id odio vestibulum, quis mollis est tempor. Etiam sed purus orci. Nullam sit amet tortor eget.</p>
    {% endcall %}
  {% endcall %}
{% endblock %}