{%- if editmode -%}

    {%- for i in pimcore_block('cardsBlock').iterator() -%}

        <div class="ms-40 mb-20">

            <div class="row">
            
                <div class="col-auto">
                    {{ pimcore_image('image', {
                        width: 400,
                        height: 400
                    }) }}
                </div>

                <div class="col">
                
                    <div class="{{ heading_size }}">{{ pimcore_input('heading', {
                        placeholder: 'Lorem ipsum dolor sit amet'
                    }) }}</div>

                    <div class="{{ rich_text_size }}">{{ pimcore_wysiwyg('body', {
                        placeholder: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis euismod erat, et ullamcorper purus. Suspendisse eu consequat purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus mauris nunc, euismod pulvinar efficitur sit amet, ornare et velit. Aliquam a lacinia est, non aliquet mi. Sed quis elit aliquam, hendrerit risus quis, porta risus. Vivamus eros ex, dignissim sit amet pulvinar a, iaculis ac orci. Aenean dictum neque justo. Fusce non libero et est sodales viverra. Morbi tempus tellus eu iaculis vehicula.'
                    }) }}</div>

                    <div>{{ pimcore_link('cta') }}</div>

                </div>
            
            </div>

        </div>

    {%- endfor -%}

{%- else -%}

    <div class="overflow-hidden">

        <div class="row gx-lg-100 gx-xxl-200 gy-60 gy-lg-0">

            {%- for i in pimcore_block('cardsBlock').iterator() -%}
            
                <div class="col-12 col-md-6">

                    <div class="position-relative {{ loop.index is odd ? 'pt-lg-80 pt-xl-100 pt-xxl-120' : '' }}">

                        {%- set image = pimcore_image('image') -%}
                        {%- set heading = pimcore_input('heading') -%}
                        {%- set body = pimcore_wysiwyg('body') -%}
                        {%- set cta = pimcore_link('cta') -%}

                        <div class="card1 d-flex flex-column gap-20">

                            {%- if heading.data or body.data or (not cta.empty) -%}

                                <div class="card-body order-2">

                                    {%- if heading.data -%}
                                        <{{ heading_semantic }} class="{{ heading_size }} text-{{ heading_color }}">{{ heading.data }}</{{ heading_semantic }}>
                                    {%- endif -%}

                                    {%- if body.data -%}
                                        <div class="{{ rich_text_size }} text-{{ rich_text_color }}">{{ body.data | raw }}</div>
                                    {%- endif -%}

                                    {% if not cta.empty -%}
                                        {%- set blank = cta.target == '_blank' -%}
                                        {%- set aria_label = (cta.title | default(cta.text)) ~ ('general.open_new_tab' | trans) -%}
                                        {{- pimcore_link('cta', {
                                            class: 'stretched-link cta text-' ~ cta_color,
                                            'aria-label': blank ? aria_label : null,
                                            text: null
                                            }) | raw
                                        -}}
                                    {%- endif -%}

                                </div>

                            {%- endif -%}

                            {%- if not image.isEmpty() -%}
                                <div class="card-media order-1">
                                    {{ image.thumbnail('brick-' ~ brick.id).html({
                                        'disableAutoAlt': true,
                                        'alt': get_image_i18n_alt(image, ''),
                                        'useDataSrc': true,
                                        'pictureAttributes': {
                                            'class': 'w-100 h-100 d-block overflow-hidden ratio ratio-1x1 user-select-none pointer-events-none'
                                        },
                                        'imgAttributes': {
                                            'class': 'w-100 h-100 object-fit-cover lazyload',
                                            'width': '100%',
                                            'height': '100%',
                                        }
                                    }) | raw }}
                                </div>
                            {%- endif -%}

                        </div>

                    </div>

                </div>

            {%- endfor -%}

        </div>
        
    </div>

{%- endif -%}