<article class="insobiGridCustom py-5 bg-{{ index.index0 }} {{
  component.backgroudColor
  }}"
  id="{{ id }}">
  <section class="container py-5">
    <div class="row {{ component.invert ? 'flex-row-reverse' : null }}">
      <section class="col-12 col-md-7 d-flex justify-content-center flex-column align-items-start">
        <div class="px-md-5">
          <h2 class="insobiGridCustom__title {{ component.alignTitle }}">
            {{ component.blockTitle }}
          </h2>
          <section class="insobiGridCustom__description">
            {{ component.description }}
          </section>
          <section class="d-inline-block mb-3">
            {% include 'components/_btnArrow' with {
              btn: component.itemLink
            } only %}
          </section>
        </div>
      </section>
      <section class="col-12 col-md-5">
        <div class="insobiGridCustom__contentImg">
          {% set img = component.image.one() %}
          <img data-src="{{ img.getUrl('blockImageGrid') }}"
            alt="{{ img.title }}"
            loading="lazy"
            class="lazyload img-absolute" />
        </div>
      </section>
    </div>
  </section>
</article>
