{% include 'quarks/_loadCssComponent' with {
    name: '_gridImageAndText-image'
  } only %}
<section class="col-12 {{ columns }} {{ 
    orderGrid
    }} d-flex justify-content-center flex-column">
    {% if image %}
      <div class="gridAndTextComponent__img">
        {% if notTransform %}
          <img data-src="{{ image.url }}"
            alt="{{ image.title }}"
            loading="lazy"
            class="lazyload insabiIconsList__icon m-3" />
        {% else %}
          {% include 'components/_imageTransformsSimple' with {
            img: image,
            setClass: 'img-absolute',
            alt: image.title,
            transforms: {
              '(min-width: 1197px)': {
                width: columns == 'col-lg-12' ? 1300 : 750
              },
              '(min-width: 1196px)': {
                width: 500,
                height: 1300
              },
              '(min-width: 695px)': {
                width: 710
              }
            },
            default: {
              width: 560
            }
          } only %}
        {% endif %}
      </div>
    {% endif %}
</section>