{% sw_extends '@Storefront/storefront/element/cms-element-section-title.html.twig' %}
{% block element_section_title_subtitle %}
{% if element.config.subtitle.value %}
<div class="section-title font-accent text-sm font-bold uppercase text-black tracking-wider py-4">
{{ element.config.subtitle.value }}
</div>
{% endif %}
{% endblock %}
{% block element_section_title_title %}
{% if element.config.pagetitle.value === 'h1' %}
<h1 class="section-title text-2xl font-bold text-black tracking-[-0.02em] md:text-4xl">
{{ element.config.title.value }}
</h1>
{% elseif element.config.pagetitle.value === 'h2' %}
<h2 class="section-title text-2xl font-bold text-black tracking-[-0.02em] md:text-4xl">
{{ element.config.title.value }}
</h2>
{% elseif element.config.pagetitle.value === 'h3' %}
<h3 class="section-title text-2xl font-bold text-black tracking-[-0.02em] md:text-4xl">
{{ element.config.title.value }}
</h3>
{% endif %}
{% endblock %}
{% block element_section_title_description %}
{% if element.config.description.value %}
<div class="section-description font-sm my-2 text-grey-600 max-w-[500px] {% if element.config.center.value === true %} mx-auto {% endif %} %}">
{{ element.config.description.value }}
</div>
{% endif %}
{% endblock %}