{% set columnCount = pimcore_numeric('columnCount').getData()|default(1) %}
{% set bgImageStyle = "" %}
{% set bgFilter = "hidden" %}
{% if pimcore_select("colorFilter").getData() == 'gold' %}
{% set bgImageStyle = "filter: grayscale(100%);" %}
{% set bgFilter = "opacity-75 bg-primary" %}
{% elseif pimcore_select("colorFilter").getData() == 'braun' %}
{% set bgImageStyle = "filter: grayscale(100%);" %}
{% set bgFilter = "opacity-75 bg-secondary" %}
{% elseif pimcore_select("colorFilter").getData() == 'hellgrau' %}
{% set bgImageStyle = "filter: grayscale(100%);" %}
{% set bgFilter = "opacity-75 bg-background" %}
{% elseif pimcore_select("colorFilter").getData() == 'dunkelgrau' %}
{% set bgImageStyle = "filter: grayscale(100%);" %}
{% set bgFilter = "opacity-75 bg-secondary" %}
{% endif %}
<div class="relative w-full overflow-hidden bg-center bg-cover"
{# {% if not editmode %}
{% set image = pimcore_image("background").getThumbnail('features-background') %}
style="background-image: url('{{ image }}');"
{% endif %} #}
>
{% if not editmode %}
<div class="absolute top-0 left-0 w-full h-full bg-center bg-cover z-60"
{% set image = pimcore_image("background").getThumbnail('hero-background') %}
style="background-image: url('{{ image }}'); {{ bgImageStyle }}"
></div>
{% endif %}
{% if editmode %}
{{ pimcore_image("background", {
"thumbnail": "features-background",
"class": "w-full",
})|raw }}
{% endif %}
<div class="relative max-w-4xl p-8 mx-auto z-80 md:py-24 md:px-0">
{% for i in range(1, columnCount) %}
<div class="grid items-center my-8 md:my-4 md:space-x-8 md:grid-cols-12">
<div>
{{ pimcore_image('icon-' ~ i, {
"thumbnail": "features-icon",
"class": "mx-auto md:mx-0 md:w-full"
}) }}
</div>
<div class="text-white md:col-span-11">
<h3 class="text-3xl font-medium tracking-wide font-headline">{{ pimcore_input('headline-' ~ i) }}</h3>
<p class="text-lg">{{ pimcore_input('content-' ~ i) }}</p>
</div>
</div>
{% endfor %}
</div>
<div class="absolute top-0 left-0 w-full h-full z-70 {{ bgFilter }}"></div>
</div>