{% set title = title | default(value="Feature") %}
{% set description = description | default(value="") %}
{% set link = link | default(value="") %}
{% set icon = icon | default(value="") %}
{% set bg_color = bg_color | default(value="bg-white") %}
{% set hover_color = hover_color | default(value="hover:bg-gray-50") %}


<div class="relative {{ bg_color }} {{ hover_color }} shadow rounded-lg p-4 transition-all duration-300">
  {% if icon %}
  <div class="flex items-center justify-center h-12 w-12 rounded-md bg-gray-200 text-white mb-4">
    <img src="{{ icon | safe }}" class="">
  </div>
  {% endif %}
  <h3 class="text-md font-medium">{{ title }}</h3>
  {% if description %}
  <p class="my-2 font-extralight">{{ description }}</p>
  {% endif %}
  {% if link %}
  <a href="{{ link }}" class="text-sm font-semibold text-black hover:text-gray-700">{{ link_name }} <span aria-hidden="true">→</span></a>
  {% endif %}
  {% if caller %}
    <div class="mt-4">
      {{ caller() }}
    </div>
  {% endif %}
</div>

<style scop>

  p{
    font-weight: 200;
  }
</style>
