{#
    CMS pages teaser component that bases on image teaser component.
#}
{% set mix = mix ? mix : '' %}
{% set itemsPerRow = currentScenario.desktopLayout.id %}
{% set itemsPerRowMobile = 2 %}
{% set itemsPerViewMobile = 1 %}
{% set itemsPerView = currentScenario.desktopLayout.id %}
{% set displayVariant = 'inside' %}

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

{# Setting up "sizes" attribute basing on configuration. #}
{% set sizesMobile = '(max-width: 48em) 100vw' %}
{% set sizesDesktop = '100' / itemsPerView ~ 'vw' %}
{% set sizesDesktop =  '(min-width: 1200px) ' ~ 1200 / itemsPerView ~ 'px, ' ~ sizesDesktop %}
{% set sizes = sizesMobile ~ ', ' ~ sizesDesktop %}

<div class="cs-container cs-container--edge-to-edge">
    <div class="cs-container__inner">

        {% 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'
            }
        } %}
    </div>
</div>