{% load displaypage_tags %}
{# Text beside, above or over an image, a video or an image gallery. #}
{% with layout=section|dp_text_media_layout %}
<div class="dp-text-media dp-text-media--{{ layout }} dp-text-media--media-{{ section.media_type }} dp-text-media--media-{{ section.media_position }} dp-text-media--width-{{ section.media_width }} dp-text-media--content-{{ section.content_position }}{% if section.colour_scheme %} dp-scheme--{{ section.colour_scheme }}{% endif %}">
  {% if layout == 'inside-page' or layout == 'inside-full' %}
  <div class="{% if layout == 'inside-page' %}dp-container{% else %}dp-text-media__bleed{% endif %}">
    <figure class="dp-text-media__stage">
      <div class="dp-text-media__backdrop">{% include "displaypage/includes/text_media_media.html" with background=True %}</div>
      <div class="dp-text-media__overlay{% if layout == 'inside-full' %} dp-container{% endif %}">
        <div class="dp-text-media__panel">{% include "displaypage/includes/text_media_text.html" %}</div>
      </div>
    </figure>
    {% if section.caption %}<p class="dp-caption dp-text-media__caption{% if layout == 'inside-full' %} dp-container{% endif %}">{{ section.caption }}</p>{% endif %}
  </div>
  {% elif layout == 'above' %}
  <div class="dp-container">
    <div class="dp-text-media__text dp-text-media__text--above">{% include "displaypage/includes/text_media_text.html" %}</div>
    <figure class="dp-text-media__media">
      {% include "displaypage/includes/text_media_media.html" %}
      {% if section.caption %}<figcaption class="dp-caption">{{ section.caption }}</figcaption>{% endif %}
    </figure>
  </div>
  {% else %}
  <div class="dp-container">
    <div class="dp-text-media__grid">
      <div class="dp-text-media__text">{% include "displaypage/includes/text_media_text.html" %}</div>
      <figure class="dp-text-media__media">
        {% include "displaypage/includes/text_media_media.html" %}
        {% if section.caption %}<figcaption class="dp-caption">{{ section.caption }}</figcaption>{% endif %}
      </figure>
    </div>
  </div>
  {% endif %}
</div>
{% endwith %}