{% set h = first_component ? 'h1' : 'h2' %}
{% set h = variant == 'icon' ? 'h3' : h %}
{% set tag = variant == 'icon' ? 'a' : 'div' %}
{% set tag_href = tag == 'a' ? 'href="' ~ button_data.href ~ '"' : '' %}

{% set tag_target = tag == 'a' and button_data.external ? 'target="_blank"' : '' %}
{% set type = variant ? 'card--' ~ variant : 'card--default' %}
{% set classes = [
  'card',
  type,
] %}

<{{tag}} class="{{ classes|join(' ') }}" {{ tag_href }} {{ tag_target }}>
  <div class="switcher">
    {% if icon_data and variant == 'icon' %}
      {% include "@atoms/Icon/Icon.twig" with icon_data %}
    {% elseif media %}
      <div class="card__media">
        {% if variant != 'overlay' %}
          <div class="frame">
            {{ media }}
        {% else %}
          <div style="--background-image: url('{{ media.url }}');">
        {% endif %}
        </div>
        {% if media_caption %}
          <div class="card__media-caption caption">
            {{ media_caption }}
          </div>
        {% endif %}
      </div>
    {% endif %}
    <div class="card__main box stack center">
      {% if heading %}
        <div class="card__heading">
          <{{h}}>{{ heading }}</{{h}}>
        </div>
      {% endif %}
      {% if text %}
        <div class="card__text">
          {{ text }}
        </div>
      {% endif %}
      {% if button_data.href and tag == 'div' %}
        <div class="card__button">
          {% include "@atoms/Button/Button.twig" with button_data %}
        </div>
      {% endif %}
    </div>
  </div>
</{{tag}}>
