{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
{% set arr_transforms = [
    {
      '(min-width: 992px)': {
        width: 600
      },
      '(min-width: 768px)': {
        width: 750
      },
      '(min-width: 576px)': {
        width: 600
      }
    },
    {
      '(min-width: 992px)': {
        width: 350,
        height: 490
      },
      '(min-width:768px)': {
        width: 350,
        height: 480
      }
    }
  ] %} 
  
<section {{ dataComponent }} id="{{ id }}" class="grid2ImagesAndText bg-{{ index.index0 }} {{ separation }}" data-g2-1245>
      <div class="container-fluid g2ImgAndText px-0">
          <section class="row g-3">
              <div class="col-12 col-lg-6">
                  {% set imgs = component.twoImages.all() ?? null %}
                  {% if imgs %}
                      <section class="g2ImgAndText__grid">
                          {% for img in imgs %}
                              <div class="g2ImgAndText__grid--item">
                                  {% include 'components/_imageTransformsSimple' with {
                    img: img,
                    setClass: 'img-absolute',
                    alt: component.blockTitle,
                    transforms: arr_transforms[loop.index0],
                    default: {
                      width: loop.first ? 510 : 1
                    }
                  } only %}
                              </div>
                          {% endfor %}
                      </section>
                  {% endif %}
              </div>
              <div class="col-12 col-lg-6 g2ImgAndText__text px-4 px-lg-5">
                  {% include 'components/_setHeadTitles' %}
                  {% if (component.description|length) > 0 %}
                      <section class="description">
                          {{ component.description }}
                      </section>
                  {% endif %}
                  {% include 'components/_btnArrow' with {
            btn: component.itemLink,
            classCustom: 'justify-content-start px-0',
            parentClass: 'col-12 col-md-5'
          } only %}
              </div>
          </section>
      </div>
</section>