{# grid-container-large must be there to override wrapperClasses. Container size is used only for the content, not the buttons #}
<div class="paragraph--introduction {{ hideUnpublishClasses }} {{ wrapperClasses|join(' ') }} grid-container-large">
    <div class="pi__wrapper">
        <div class="pi__content mx-auto {{ text_color }} {{ containerSize }}">
            {{ content }}
        </div>
        {% set btnTypeClass = color_links is not empty ? color_links : 'btn-outline-primary' %}
        <div class="pi__link-list w-100 d-flex flex-column flex-md-row justify-content-center pb-5">
          {% if link_1 %}
            <a class="btn {{ btnTypeClass }} d-flex align-items-center justify-content-center" href="{{ link_1.getUrl().toString()}}" title="{{ link_1.title }}">
              {% if icon_1.entity.fileuri %}
                <img src="{{ file_url(icon_1.entity.fileuri) }}" alt="{{ icon_1.description }}" aria-hidden="true" />
              {% endif %}
              {{ link_1.title }}
            </a>
          {% endif %}
          {% if link_2 %}
            <a class="btn {{ btnTypeClass }} d-flex align-items-center justify-content-center" href="{{ link_2.getUrl().toString()}}" title="{{ link_2.title }}">
              {% if icon_2.entity.fileuri %}
                <img src="{{ file_url(icon_2.entity.fileuri) }}" alt="{{ icon_2.description }}" aria-hidden="true" />
              {% endif %}
              {{ link_2.title }}
            </a>
          {% endif %}
          {% if link_3 %}
            <a class="btn {{ btnTypeClass }} d-flex align-items-center justify-content-center" href="{{ link_3.getUrl().toString()}}" title="{{ link_3.title }}">
              {% if icon_3.entity.fileuri %}
                <img src="{{ file_url(icon_3.entity.fileuri) }}" alt="{{ icon_3.description }}" aria-hidden="true" />
              {% endif %}
              {{ link_3.title }}
            </a>
          {% endif %}
          {% if link_4 %}
            <a class="btn {{ btnTypeClass }} d-flex align-items-center justify-content-center" href="{{ link_4.getUrl().toString()}}" title="{{ link_4.title }}">
              {% if icon_4.entity.fileuri %}
                <img src="{{ file_url(icon_4.entity.fileuri) }}" alt="{{ icon_4.description }}" aria-hidden="true" />
              {% endif %}
              {{ link_4.title }}
            </a>
          {% endif %}
          {% if link_5 %}
            <a class="btn {{ btnTypeClass }} d-flex align-items-center justify-content-center" href="{{ link_5.getUrl().toString()}}" title="{{ link_5.title }}">
              {% if icon_5.entity.fileuri %}
                <img src="{{ file_url(icon_5.entity.fileuri) }}" alt="{{ icon_5.description }}" aria-hidden="true" />
              {% endif %}
              {{ link_5.title }}
            </a>
          {% endif %}
        </div>
    </div>
</div>

                          

                            <div class="paragraph--modal {{ wrapperClasses|join(' ') }}">
  <div class="pm__wrapper p__wrapper {{ contentOptions }}">
    <div class="pm__content">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal{{ id }}">
        {{ button }}
      </button>
    </div>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="modal{{ id }}" tabindex="-1" role="dialog" aria-labelledby="modalDescription{{ id }}"
       aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title sr-only" id="modalDescription{{ id }}">{{ description }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="{{ 'Close' | t }}">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          {{ content }}
          {{ customBlock }}
        </div>
      </div>
    </div>
  </div>
  {% if isContactForm == 'true' %}
  <script type="application/javascript">
    window.addEventListener('load', function() {
      jQuery('#modal{{ id }}').on('show.bs.modal', function (e) {
        window.dataLayer = window.dataLayer || [];
        dataLayer.push({'event': 'modalFormOpen'});
      })
    });

  </script>
  {% endif %}
</div>

                          

                            
<div class="paragraph--text-media-offset  {{ wrapperClasses|join(' ') }}">
    {{ description }}
    <div class="ptmo__wrapper p__wrapper">
        <div class="ptmo__media">
            <img src="{{ image }}" alt="{{ image_alt }}" width="{{ image_width }}" height="{{ image_height }}">
        </div>
        <div class="ptmo__content {{ background_color }}">
            {{ content }}
        </div>
    </div>
</div>