<div class="o-flag">
  {% if icon or image.src is defined %}
      <div class="o-flag__image {{ flag.image_classes }}">

        <a href="#">
          <figure class="c-caption">
            {% if icon %}
              {% include "@atoms/icons/_icon.twig" with {"icon": icon} %}
            {% elseif image.src is defined %}
              {% include "@atoms/images/image.twig" %}
            {% endif %}

            {% if caption.header or caption.subheader is defined %}
              {% include "@atoms/captions/caption.twig" %}
            {% endif %}
          </figure>
        </a>
      </div>
    {% endif %}

    <div class="o-flag__body">
      {% block body %}

        {% if flag.subheader %}
          {% include "@atoms/typography/headings/heading.twig" with {
            heading: {
              text: flag.subheader,
              classes: "c-heading--sub"
            }
          } %}
        {% endif %}

        {% if flag.header %}
          {% include "@atoms/typography/headings/h3.twig" with {
            heading: {
              text: flag.header,
              classes: "c-heading--large"
            }
          } %}
        {% endif %}

        {% if flag.paragraph %}
          {% include "@atoms/typography/paragraph.twig" with {
            paragraph: {
              text: flag.paragraph
            }
          } %}
        {% endif %}

        {% include "@atoms/links/link.twig" %}

      {% endblock %}
    </div>
</div>
