<div class="paragraph--introduction {{ hideUnpublishClasses }} {{ wrapperClasses|join(' ') }}">
    <div class="pi__wrapper p__wrapper">
        <div class="pi__content">
            {{ content }}
        </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>

                          

                            
{% set full_link = '' %}
{% if entire_tile_click == 1 %}
  {% set full_link =  'paragraph--text-media--entire_tile_click' %}
{% endif %}
<div class="paragraph--text-media {{ wrapperClasses|join(' ') }} {{ hideUnpublishClasses }}">

    <div class="ptm__wrapper p__wrapper {{ full_link }}">
        {% if entire_tile_click == 1 %}
          <a href="{{ url }}" class="extend-link"></a>
        {% endif %}
        {%  if image_has_background %}
            <div class="ptm__media ptm__media--bg" style="background-image: url({{ image }})">
            </div>
        {% else %}
            <div class="ptm__media {% if image_align_top %}align-items-start{% else %}align-items-center{% endif %}">
                <img src="{{ image }}" alt="{{ image_alt }}" width="{{ image_width }}" height="{{ image_height }}">
            </div>
        {% endif %}
        <div class="ptm__content {{ background_color }} {% if text_align_top %}justify-content-start{% endif %}">
            {{ content }}
        </div>
    </div>
</div>

                          

                            
<div class="paragraph--text-media-offset  {{ wrapperClasses|join(' ') }}">
    <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>

                          

                            <div class="paragraph--text-video {{ hideUnpublishClasses }} {% if mobileReverse %} mobile-reverse {% endif %} {% if vidModal %} paragraph--text-video-modal {% endif %} {{ wrapperClasses|join(' ') }} row">
  <div class="ptv__wrapper p__wrapper">
    {% set placeHolderImage = vidPlaceHolderImage is not empty?vidPlaceHolderImage: "https://i.ytimg.com/vi/#{vidId}/hqdefault.jpg" %}
    <div class="ptv__video {% if vidModal %} position-relative {% endif %}bg-white">
      {% if vidModal %}
        <div class="ptv__video-media" style="background-image: url('{{ placeHolderImage }}');" id="placeholder_{{ paragraph_id }}">
        </div>
      {% endif %}

      {% if vidModal %}
        <button type="button" class="btn ptv__video-btn" aria-label="{{ 'Play' | t }}" data-toggle="modal" data-target="#modal{{ paragraph_id }}">
          <span class="ptv__video-btn-arrow"></span>
        </button>
      {% endif %}

      {% if vidModal %}
        <div class="modal fade" id="modal{{ paragraph_id }}" tabindex="-1" role="dialog" aria-labelledby="modalDescription{{ paragraph_id }}" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content modal-edge">
              <div class="modal-body">
                {% endif %}
                <div class="ptv__video__wrapper embed-responsive embed-responsive-16by9">
                  {% if '1' not in vidHtml5 %}
                    <lite-youtube class="embed-responsive-item" videoid="{{ vidId }}" params="autoplay=1&modestbranding=1&rel=0" id="player_{{ paragraph_id }}" style="background-image: url('{{ placeHolderImage }}');"></lite-youtube>
                  {% else %}
                    {% set fileExt = vidUrl | slice(-3) %}
                    {% if  'mp4' in fileExt %}
                      {% set vidType = 'video/mp4' %}
                    {% elseif 'mp4' in fileExt %}
                      {% set vidType = 'video/ogg' %}
                    {% elseif 'ebm' in fileExt %}
                      {% set vidType = 'video/webm' %}
                    {% endif %}
                    <video class="embed-responsive-item ptv__video--html" id="player_{{ paragraph_id }}" controls>
                      <source src="{{ vidUrl }}" type="{{ vidType }}">
                      {{ 'Your browser does not support the video tag.' | t }}
                    </video>
                  {% endif %}
                </div>
                {% if vidModal %}
                <script>
                  window.addEventListener('load', function() {
                    jQuery(document).on('show.bs.modal', '#modal{{ paragraph_id }}', function () {
                      jQuery(this).appendTo('body');
                      jQuery('#mm-0').css("filter", "blur(5rem)");
                    });
                    jQuery(document).on('hidden.bs.modal', '#modal{{ paragraph_id }}', function () {
                      jQuery('#player_{{ paragraph_id }}').attr('src', jQuery('#player_{{ paragraph_id }}').attr("src"));
                      jQuery('#mm-0').css("filter", "none");
                    });
                  });

                </script>
                <button type="button" class="close upper-right-over" data-dismiss="modal" aria-label="{{ 'Close' | t }}">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      {% endif %}
    </div>
    <div class="ptv__content {{ background_color }} {% if contentNoPadding %} p-0 {% endif %} ">
      {% if displayArrow %}
        <div class="ptv__arrow ptv__arrow-right {{ background_color }}"></div>
      {% endif %}
      {{ content }}
    </div>
  </div>
</div>