{% set transition_classes = 'transition duration-500 ease-in-out' %}
{% set card_classes = transition_classes ~ " bg-card relative p-16 flex flex-row justify-center w-full hover:bg-primary text-center relative group" %}
{% set header_classes = transition_classes ~ " pt-8 group-hover:-translate-y-6 border-t group-hover:border-t-transparent" %}
{% set text_classes = transition_classes ~  " w-80 opacity-0 left-0 right-0 m-auto group-hover:opacity-100 h-0 group-hover:h-auto absolute" %}
{% set icon_classes = transition_classes ~ " flex flex-row justify-center opacity-100 group-hover:opacity-0 pt-8"%}

{% if url %}
  <a href="{{ url }}">
{% endif %}
<div class="{{card_classes}}">
  <div class="p-8 group-hover:text-background">
    <h3 class="{{ header_classes }}">{{heading}}</h3>
    <p class="{{ text_classes }}">{{text}}</p>
  {% if icon %}
    <div class="{{icon_classes}}">
    {{
        include(
          '@everbright_theme/components/icon/icon.twig',
          {
            icon: icon,
            icon_size: 'extra-extra-small'
          },
          with_context: false
        )
    }}
    </div>
  {% endif %}
  </div>
</div>
{% if url %}
  </a>
{% endif %}
