{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
<section {{ dataComponent }} id="{{ id }}" class="aboutMarket bg-{{ index.index0 }} {{ separation }}"> 
	<div class="container">
		{% include 'components/_setHeadTitles' %} 

		<section class="row">
			<div class="col-12 col-md-7">
				{% if (component.description|length) > 0 %}
					<div class="aboutMarket__description">
						{{ component.description }}
					</div>
				{% endif %}
				{% if (component.fieldText|length) > 0 %}
					<p class="aboutMarket__titleList pt-4">
						{{ component.fieldText }}
					</p>
				{% endif %}
				{% set listsText = component.listsText.all() ?? null %}
				{% if listsText %}
					<ul class="mx-0 p-0 textAndListBlock__listText pb-3">
						{% for item in listsText %}
							<li class="textAndListBlock__listText--item mb-4">
								<p class="my-0 bullet me-2 pt-1">
									<img data-src="/assets/img/bullet.svg" src="" alt="bullet" loading="lazy" class="lazyload im-fluid"/>
								</p>
								<div class="descriptionList">
									{{ item.text }}
								</div>
							</li>
						{% endfor %}
					</ul>
				{% endif %}
				{% set links = component.listsLinks.all() ?? null %}
				{% if links %}
					{% for i in links %}
						{% include 'components/_btnArrow' with {
              btn: i.itemLink,
              classCustom: 'justify-content-start',
              parentClass: 'col-12 col-lg-9 ' ~ loop.last ? 'mb-4' : null
            } only %}
					{% endfor %}
				{% endif %}
			</div>
			<div class="col-12 col-md-5">
				{% set img = component.image[0] ?? null %}
				{% if img %}
					<section class="aboutMarket__img">
						{% include 'components/_imageTransformsSimple' with {
              img: img,
              setClass: 'img-absolute',
              alt: img.title,
              transforms: {
                '(min-width: 1197px)': {
                  width: 750,
                  height: 1200
                },
                '(min-width: 1196px)': {
                  width: 500,
                  height: 1300
                },
                '(min-width: 695px)': {
                  width: 500
                }
              },
              default: {
                width: 560,
                height: 610
              }
            } only %}
					</section>
				{% endif %}
			</div>
		</section>
		{% if (component.additionalText|length) > 0 %}
			<div class="aboutMarket__footer pt-5 pb-4 mt-4">
				{{ component.additionalText }}
			</div>
		{% endif %}
	</div>
</section>