{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
<section {{ dataComponent }} id="{{ id }}" class=" {{ index.last ? 'border-0' : null }} bgImgFBlock {{component.fieldSwitch is same as(true) ? 'bgImgFBlock__bottom'}}  bg-{{
    index.index0
    }} {{ separation }}">
<div class="container mb-lg-5 py-4">
  {% include 'components/_setHeadTitles' %}
</div>
<div class="container-fluid px-lg-0 bgImgFBlock__content mb-lg-5">
  {% set backgroudImage = component.image[0] ?? null %}
  {% if backgroudImage %}
      {% include 'components/_imageTransformsSimple' with {
  img: backgroudImage,
  setClass: 'img-absolute d-none d-md-block',
  alt: component.blockTitle
} only %}
  {% endif %}

  <section class="bgImgFBlock__block p-3 p-md-4 col-12 col-md-6 col-lg-5 text-start text-lg-center">
          <div class="bgImgFBlock__description">
              {% if component.fieldSwitch2 is same as(false)  and (component.description|length) > 0 %}
                  {{ component.description }}
              {% else %}
                  {% set quote = component.quoteField %}
                  <blockquote>
                      <div class="content text-end">"{{quote.quote}}"</div>
                      <div class="autor my-2">{{quote.autor}}</div>
                  </blockquote>
              {% endif %}
          </div>
      {% include 'components/_btnArrow' with {
          btn: component.itemLink,
          Highlight: true,
          parentClass: 'd-inline-block'
      } only %}
  </section>
</div>
<div class="container my-lg-5 py-3">
  <div class="row">
      <div class="col-md-12">
          <div class="bgImgFBlock__aditionaltext">
              {{component.additionalText}}
          </div>
      </div>
  </div>
</div>
</section>