{% if not banners.text_overlay %}
  {% set text_overlay_class = 'uw-text-overlay--full-width' %}
{% else %}
  {% set text_overlay_class = 'uw-text-overlay--' ~ banners.text_overlay %}
{% endif %}

<div class="card__banner--image {{ text_overlay_class }}">
  {% if image.link %}
  <a href="{{ image.link }}">
    {% endif %}
    <div class="card__banner--media">
      {% if listing_image.img_element %}
        {% include "@components/responsive-image/responsive-image.twig" with {
          sources: image.sources,
          img_element: listing_image.img_element,
          alt: listing_image.alt
        }%}
      {% else %}
        {% include "@components/responsive-image/responsive-image.twig" with {
          sources: image.sources,
          img_element: image.img_element,
          alt: image.alt
        }%}
      {% endif %}
    </div>
    {% if image.big_text or image.small_text %}
      <div class="card__banner--caption">
        {% if banners.use_page_title_big_text %}
          <h1 class="card__banner--title">{{ image.big_text }}</h1>
        {% else %}
          {% if image.big_text %}
            <strong>
              <span class="card__banner--title">
                {{ image.big_text }}
              </span>
            </strong>
          {% endif %}
        {% endif %}
        {% if image.small_text %}
          <span class="card__banner--sub-title">
          {{ image.small_text }}
        </span>
        {% endif %}
      </div>
    {% endif %}
    {% if image.link %}
  </a>
  {% endif %}
</div>