{% set mix = mix ? mix : '' %}
{% set itemsPerRow = currentScenario.desktopLayout.id %}
{% set itemsPerRowMobile = 2 %}
{% set displayVariant = 'outside' %}
{% set itemsPerViewMobile = 1 %}
{% set itemsPerView = currentScenario.desktopLayout.id %}
{% if currentScenario.mobileLayout.id == 'large' or currentScenario.mobileLayout.id == 'slider' or currentScenario.mobileLayout.id == 'col' %}
    {% set itemsPerRowMobile = 1 %}
{% endif %}

{% if itemsPerView == 6 %}
    {% set itemsPerViewMobile = 3 %}
    {% if currentScenario.mobileLayout.id == '2-2-2' %}
        {% set itemsPerRowMobile = 2 %}
    {% else %}
        {% set itemsPerRowMobile = 3 %}
    {% endif %}
{% endif %}

{% if currentScenario.teaserWidth.id == 'w-s' or currentScenario.teaserWidth.id == 'c-s' %}
    {% set isSlider = true %}
{% endif %}

{% if currentScenario.mobileLayout.id == 'slider' %}
    {% set isSliderMobile = true %}
{% endif %}

{% if currentScenario.mobileLayout.id == '1-2' %}
    {% set mix = mix ~ ' cs-image-teaser--mobile-cfg-big-small-small' %}
{% endif %}

{% if currentScenario.mobileLayout.id == '1-2-1' %}
    {% set mix = mix ~ ' cs-image-teaser--mobile-cfg-big-small-small-big' %}
{% endif %}

{% if currentScenario.textPositioning.id == 'over' %}
    {% set displayVariant = 'inside' %}
{% endif %}
{# Setting up "sizes" attribute basing on configuration. #}
{% set sizesMobile = '(max-width: 48em) 100vw' %}
{% set sizesDesktop = '100' / itemsPerView ~ 'vw' %}
{% if currentScenario.teaserWidth.id == 'w-s' %}
    {% set sizesMobile = '(max-width: 48em) 80vw' %}
    {% set sizesDesktop = '80' / itemsPerView ~ 'vw' %}
{% elseif currentScenario.teaserWidth.id == 'c' %}
    {% set sizesDesktop =  '(min-width: 1200px) ' ~ 1200 / itemsPerView ~ 'px, ' ~ sizesDesktop %}
{% endif %}

{% set sizes = sizesMobile ~ ', ' ~ sizesDesktop %}

<div class="cs-container cs-container--edge-to-edge">
    {% if currentScenario.teaserWidth.id == 'c' or currentScenario.teaserWidth.id == 'c-s' %}
        <div class="cs-container__inner">
    {% endif %}

        {% include locate('components/image-teaser/image-teaser.twig') with {
            lazyload: true,
            namespace: 'cs-',
            mix: mix,
            navigation: {
                icons: {
                    prev: {
                        src: '#icon_arrow-left'
                    },
                    next: {
                        src: '#icon_arrow-right'
                    },
                }
            },
            sizes: sizes,
            button: {
                class: 'cs-button cs-button--type_long cs-button--look_default',
                icon: {
                    class: 'cs-button__icon',
                    src: '#arrow_next'
                },
                labelClass: 'cs-button__span'
            }
        } %}

    {% if currentScenario.teaserWidth.id == 'c' or currentScenario.teaserWidth.id == 'c-s' %}
        </div>
    {% endif %}
</div>