{% include 'quarks/_loadCssComponent' with {
    name: '_twoColumnsWithBulletsAndBottomText'
  } only %}
<section {{ dataComponent }} id="{{id}}" class="container twoColumnsWithBullets bg-{{ index.index0 }} {{ separation }}">
    <div class="row">
        <div class="col-md-12 py-4">
            <h2 class="twoColumnsWithBullets__title text-center">{{component.blockTitle}}</h2>
            <p class="text-center twoColumnsWithBullets_subtitle">{{component.subtitle}}</p>
        </div>
    </div>
    <div class="row">
        {% for el in component.imageWithBullets.all() %}
        <div class="col-md-6">
            <div class="card twoColumnsWithBullets_card">
                {% set img = el.image[0] ?? null %}
					{% if img %}
						{% include 'components/_imageTransformsSimple' with {
                            img: img,
                            setClass: 'img-absolute',
                            alt: img.title,
                            transforms: {
                              '(min-width: 1197px)': {
                                width: 750
                              },
                              '(min-width: 1196px)': {
                                width: 500,
                                height: 1300
                              },
                              '(min-width: 695px)': {
                                width: 710
                              }
                            },
                            default: {
                              width: 560
                            }
                        } only %}
					{% endif %}
                <h4 class="twoColumnsWithBullets_card__title py-4"> <span>{{loop.index}}</span> {{el.titleblock}}</h4>
                <div class="card-body">
                    <h6 class="twoColumnsWithBullets_card_subtitle">{{el.subtitlle}}</h6>
                    <ul class="twoColumnsWithBullets_card__bullets p-0 p-md-3">
                    {% for item in el.bullet %}
                        <li class="twoColumnsWithBullets_card__bullets-item py-2"> <img data-src="/assets/img/bullet.svg" src="" alt="bullet" loading="lazy" class="lazyload im-fluid"/><p class="mb-0">{{item.bullet}}</p></li>
                    {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="twoColumnsWithBullets_bottomtext">
                {{component.additionalText}}
            </div>
        </div>
    </div>
</section>