{% load i18n village_tags %}
<figure class="village-content-media{% if self.extra_classes %} {{ self.extra_classes }}{% endif %}"
        role="group"
        {% if self.caption %} aria-label="{{ self.caption }}"{% endif %}>
  <div class="village-content-media__img">
    {% if self.image_url %}
      <img class="village-responsive-img{% if self.ratio_class %} {{ self.ratio_class }}{% endif %}"
           src="{{ self.image_url }}"
           alt="{{ self.alt_text }}" />
    {% elif self.svg %}
      {{ self.svg|safe }}
    {% elif self.iframe %}
      <iframe title="{{ self.iframe.title }}"
              class="village-responsive-vid{% if self.ratio_class %} {{ self.ratio_class }}{% endif %}"
              src="{{ self.iframe.url }}"
              {% if self.iframe.width %}width="{{ self.iframe.width }}"{% endif %}
              {% if self.iframe.height %}height="{{ self.iframe.height }}"{% endif %}
              {% if self.iframe.allow %}allow="{{ self.iframe.allow }}"{% endif %}
              {% if self.iframe.sandbox %}sandbox="{{ self.iframe.sandbox }}"{% endif %}
              allowfullscreen></iframe>
    {% endif %}
  </div>
  {% if self.caption %}
    <figcaption class="village-content-media__caption">
      {{ self.caption|safe }}
    </figcaption>
  {% endif %}
  {% if self.transcription %}
    {% village_transcription self.transcription %}
  {% endif %}
</figure>
