<div class="flex flex-col w-full {% if alineacion|default == 'button_end' %} flex items-center lg:flex-row gap-y-2 lg:gap-y-0 gap-x-6 {% elseif alineacion|default == 'description_end' %} grid grid-cols-1 lg:grid-cols-2 lg:grid-rows-[1fr_auto] gap-y-2 gap-x-6 {% elseif alineacion|default == 'center' %} !items-center !justify-center !text-center !mx-auto {% elseif alineacion|default == 'start' %} justify-start items-start text-start {% elseif alineacion|default == 'end' %} text-start items-start lg:items-end lg:text-end {% elseif alineacion|default == 'start_center' %} text-center lg:text-start items-center lg:items-start {% endif %}">
<div class="w-full {% if alineacion|default == 'button_end' %} col-span-3 order-1 {% elseif alineacion|default == 'description_end' %} row-span-2 order-1 !text-start {% endif %}">
{% if alineacion|default == 'button_end' %}
<div class="!text-start"> {% endif %}
{% if antetitulo|default %}
{# Para asegurarnos que TailwindCSS genera el css que se puede usar en el antetitulo creamos todas las opciones de important #}
<span class="hidden !text-primary !text-white !text-black !text-secondary"></span>
<span class="block text-sm lg:text-base uppercase font-semibold pb-2 {{ '!text-' ~ color_antetitulo }}">{{ antetitulo|raw }}</span>
{% endif %}
{% if titulo|default %}
{% set titulo = '<' ~ heading_level|default('h2') ~ ' class="' ~ heading_class|default('my-4 block text-2xl lg:text-4xl leading-tight uppercase [&_span]:text-primary') ~ '">' ~ titulo ~ '</' ~ heading_level|default('h2') ~ '>' %}
{{ titulo|raw }}
{% endif %}
</div>
<div class="{% if alineacion|default == 'button_end' %} !text-start order-2 col-span-3 {% elseif alineacion|default == 'description_end' %} order-1 mt-0 lg:mt-7 !text-start {% endif %}">
{% if descripcion|default %}
<div class="{{ descripcion_class|default('text-sm leading-snug block lg:!leading-1 font-normal lg:text-base prose max-w-none') }}">{{ descripcion|raw }}</div>
{% endif %}
</div>
{% if alineacion|default == 'button_end' %} </div> {% endif %}
<div class="{% if alineacion|default == 'button_end' %} w-full lg:w-[20%] order-3 flex justify-start lg:justify-end {% elseif alineacion|default == 'description_end' %} order-2 {% endif %}">
{% if boton|default and color_boton|default and boton.title|default %}
<div class="mt-2 lg:mt-4 {% if alineacion|default == 'button_end' %} !mt-0 {% endif %} {% if alineacion|default == 'description_end' %} !mt-0 {% endif %}">
{% embed 'components/items/button.html.twig' with {
link: boton.url,
text: boton.title,
target: boton.target,
color: color_boton,
class: 'text-nowrap',
rel: boton.rel|default,
} only %}
{% endembed %}
</div>
{% endif %}
</div>
</div>