{% 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
      }
    }
  ] %}
  {% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
<section {{ dataComponent }} id="{{ id }}" class="aboutInsabi bg-{{ index.index0 }} {{ separation }}">
      <div class="container-fluid px-0">
          <section class="row g-3">
              <div class="col-12 col-md-5 d-flex justify-content-center align-items-center flex-column">
                  <section class="col-11 col-lg-10 ms-lg-auto me-lg-4">
                      {% include 'components/_setHeadTitles' with {
              stylesClass: 'text-start text-md-start'
            } %}
  
                      {% if component.description %}
                          <div class="aboutInsabi__description text-start text-md-start">
                              {{ component.description }}
                          </div>
                      {% endif %}
                      {% include 'components/_btnArrow' with {
              btn: component.itemLink,
              parentClass: 'col-12 text-start'
            } only %}
                  </section>
              </div>
              <div class="col-12 col-md-7 aboutInsabi__grid ps-lg-5">
                  {% set images = component.twoImages.all() ?? [] %}
                  {% if (images|length) > 0 %}
                      {% for item in images %}
                          <section class="aboutInsabi__grid--img">
                              {% include 'components/_imageTransformsSimple' with {
                  img: item,
                  setClass: 'img-absolute',
                  alt: component.blockTitle,
                  transforms: arr_transforms[loop.index0],
                  default: {
                    width: loop.first ? 510 : 1
                  }
                } only %}
                          </section>
                      {% endfor %}
                  {% endif %}
              </div>
          </section>
      </div>
</section>