{% sw_extends '@Storefront/storefront/component/s360-usp-box-dynamic-row.html.twig' %}
{% block s360_usp_element_outer %}
{% if item.col and item.mediaId %}
{% set mediaCollection = searchMedia([item.mediaId], context.context) %}
{% set mediaObject = mediaCollection.get(item.mediaId) %}
<div class="col-12 col-md-6 col-lg-{{ item.col }} s360-usp-col">
{% if (item.linkType == 'category' and item.categoryId) or (item.linkType == 'url' and item.linkUrl) %}
<a href="{% if item.linkType == 'category' and item.categoryId %}
{{ seoUrl('frontend.navigation.page', { navigationId: item.categoryId }) }}
{% elseif item.linkType == 'url' and item.linkUrl %}
{{ item.linkUrl }}
{% endif %}">
{% endif %}
{% set color = element.config.textColor.value %}
{% block s360_usp_element_inner %}
<img class="s360-dynamic-usp__image" src="{{ mediaObject.url }}"
alt="{% if mediaObject.alt %}mediaObject.alt {% else %}Kategoriebild{% endif %}">
{% if item.title or item.subtitle or item.buttonText %}
<div class="s360-dynamic-usp__text">
{% if item.title %}
<h4 class="s360-dynamic-usp__title{% if item.title == 'Sale' or item.title == 'Sales' %} is-sale{% endif %}"{% if color %} style="color: {{color}}"{% endif %}>
{{ item.title }}
</h4>
{% endif %}
{% if item.subtitle %}
<p class="s360-dynamic-usp__subtitle"{% if color %} style="color: {{color}}"{% endif %}>
{{ item.subtitle }}
</p>
{% endif %}
{% if item.buttonText %}
<button class="btn btn-primary mt-2 mt-lg-4 s360-dynamic-usp__button">
{{ item.buttonText }}
</button>
{% endif %}
</div>
{% endif %}
{% endblock %}
{% if item.categoryId or item.linkUrl %}
</a>
{% endif %}
</div>
{% endif %}
{% endblock %}