{% call SGBuilder.SGSection({ title: 'Media object', id: 'media-object' }) %}
  {% call GridBuilder.Grid() %}
    {% call GridBuilder.GridColumn({ md: 12 }) %}
      <h3>Media object gallery</h3>
      {% call SGBuilder.SGRow() %}
        {% call MediaObject({
          media: {
            sources: [],
            image: {
              src: '432x310',
              width: '432',
              height: '310'
            }
          },
          useFancybox: true,
          id: '1',
          useBlur: true,
          caption: false
        }) %}
        {% endcall %}

        {% call MediaObject({
          media: {
            sources: [],
            image: {
              src: '432x310',
              width: '432',
              height: '310'
            }
          },
          useFancybox: true,
          id: '1',
          useBlur: true,
          caption: false
        }) %}
        {% endcall %}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 12 }) %}
      <h3>Media object once</h3>
      {% call SGBuilder.SGRow() %}
        {% call MediaObject({
          media: {
            sources: [
              { media: 1200, size: '1200x600' },
              { media: 767, size: '767x383' },
              { media: 460, size: '460x230' }
            ],
            image: {
              src: '300x150',
              width: '300',
              height: '150'
            }
          },
          useFancybox: true,
          id: '2',
          useBlur: true,
          caption: '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 nu'
        }) %}
        {% endcall %}
      {% endcall %}
    {% endcall %}

  {% endcall %}
{% endcall %}