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

    {% set stagesArry = component.biddingStages.all() ?? null %}

    {% if stagesArry %}
      <section class="row gx-3 gy-5">
        {% for item in stagesArry %}
          <div class="col-12 col-md-6 col-lg-4 d-flex justify-content-center align-items-center flex-column">
            <section class="biddingStages__circle border-item{{ loop.index0 }}">
              <div class="biddingStages__circle--body itemColor-{{
                loop.index0
                }}">
                {% set icon = item.icon[0] ?? null %}
                {% if icon %}
                  <img data-src="{{ icon.url }}"
                    alt="{{ item.itemTitle }}"
                    loading="lazy"
                    width="81"
                    height="80"
                    class="lazyload img-fluid biddingStages__circle--icon" />
                {% endif %}
                {% if item.itemTitle %}
                  <p class="biddingStages__circle--title my-0">
                    {{ item.itemTitle }}
                  </p>
                {% endif %}
              </div>
            </section>
            {% if (item.description|length) > 0 %}
              <div class="biddingStages__list pt-5 description-item-{{
                loop.index0
                }}">
                {{ item.description }}
              </div>
            {% endif %}
          </div>
          {# prettier-ignore-start #}
					{% css %}
					.border-item{{loop.index0}} {
						border: solid 1px {{item.color}};
					}
					.itemColor-{{loop.index0}} {
						background-color: {{item.color}};
					}
					.description-item-{{ loop.index0 }} strong {
						color: {{item.color}};
					}
					.description-item-{{ loop.index0 }} a, .description-item-{{ loop.index0 }} a:hover {
						color: {{item.color}};
					}
					{% endcss %}
					{# prettier-ignore-end #}
        {% endfor %}
      </section>
    {% endif %}
  </div>
</section>