{% set mobileSlider = pimcore_checkbox('mobileSlider').isChecked() %}
{% if editmode %}
{% endif %}
<div class="grid {{ pimcore_checkbox('fullWidth').isChecked() ? '' : 'container' }} {% if mobileSlider and not editmode %}hidden md:grid{% endif %} grid-cols-12 {{ pimcore_input('classes').data }}" {% if editmode %} style="background: #f0f0f0;" {% endif %}>
{% for colWidth in (pimcore_select('layout').data|default(columnDefinitions[0][0]))|split('/') %}
{% if colWidth == 3 %}
{% set colSpanClass = 'col-span-12 md:col-span-6 lg:col-span-3' %}
{% elseif colWidth == 4 %}
{% set colSpanClass = 'col-span-12 md:col-span-4' %}
{% elseif colWidth == 6 %}
{% set colSpanClass = 'col-span-12 md:col-span-6' %}
{% elseif colWidth == 9 %}
{% set colSpanClass = 'col-span-12 md:col-span-6 lg:col-span-9' %}
{% elseif colWidth == 12 %}
{% set colSpanClass = 'col-span-12' %}
{% endif %}
{% if editmode %}
<div class="{{ colSpanClass }}">
<div style="background: #E0E1E2; min-height: 100px; padding: 10px; border: 1px dashed black;">
{% set absoluteWidth = (parentWidth|default(12)) / 12 * colWidth %} {# in case you need to know how wide this column is in fractions of the 12 column grid (e.g. absoluteWidth is 6 => 6/12 => 50%) #}
{{ pimcore_areablock('col-span-' ~ loop.index, brickExtensionAreaBrickConfig.gridColumns) }}
</div>
</div>
{% else %}
<div class="{{ colSpanClass }}">
{{ pimcore_areablock('col-span-' ~ loop.index) }}
</div>
{% endif %}
{% endfor %}
</div>
{% if mobileSlider and not editmode %}
{% set cols = pimcore_select('layout').data | split('/') %}
<div class="{{ pimcore_checkbox('fullWidth').isChecked() ? '' : 'container' }} {{ pimcore_input('classes').data }} md:hidden py-5 overflow-hidden">
<div class="swiper grid-columns-slider" data-breakpoints='{ "980": { "slidesPerView": {{ cols | length }} } }'>
<div class="swiper-wrapper">
{% for col in cols %}
<div class="swiper-slide">
<div class="grid-columns__slide">
{{ pimcore_areablock('col-span-' ~ loop.index) }}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}