{% load thumbnail %}{% spaceless %}

{% if instance.get_link %}
    <a href="{{ instance.get_link }}"{% if instance.is_blank_target %} target="_blank" rel="noopener noreferrer"{% endif %}
    class="glimpse-{{ glimpse_variant }}">
{% else %}
    <div class="glimpse-{{ glimpse_variant }}">
{% endif %}

<div class="glimpse-{{ glimpse_variant }}__wrapper">
    {% if instance.image %}
    <div class="glimpse-{{ glimpse_variant }}__media">
        <img src="{% thumbnail instance.image 200x200 crop upscale subject_location=instance.image.subject_location %}"
            srcset="{% thumbnail instance.image 200x200 crop upscale subject_location=instance.image.subject_location %} 200w
                {% if instance.image.width >= 400 %},{% thumbnail instance.image 400x400 crop upscale subject_location=instance.image.subject_location %} 400w{% endif %}
                {% if instance.image.width >= 800 %},{% thumbnail instance.image 800x800 crop upscale subject_location=instance.image.subject_location %} 800w{% endif %}"
            sizes="200px"
            alt="">
    </div>
    {% endif %}

    {% if instance.title %}
        <h{{ header_level|default:2 }} class="glimpse-{{ glimpse_variant }}__title">
            {{ instance.title }}
        </h{{ header_level|default:2 }}>
    {% endif %}
</div>

{% if instance.content %}
<div class="glimpse-{{ glimpse_variant }}__content">
    <svg role="img">
        <use href="#icon-quote" />
    </svg>
    {{ instance.content|linebreaks }}
</div>
{% endif %}

{% if instance.get_link %}
    </a>
{% else %}
    </div>
{% endif %}

{% endspaceless %}
