{% set ABOUT_AS_DEFAULTS = {
  className: '',
  aboutUsList: [
    { text: 'rd. 330.00 m2', bgColorClass: 'bg-light-green', isImage: false },
    { text: false, isImage: true },
    { text: 'ca. 300 firmen &<br> rd. 2.500 Beschäftigte', bgColorClass: 'bg-yellow', isImage: false },
    { text: false, isImage: true },
    { text: false, isImage: true },
    { text: 'Einzugsgebiet:<br> Berlin, Brandenburg,<br> Mecklenburg<br> Vorpommern<br> ca. 6 Mio Menschen', bgColorClass: 'bg-blue', isImage: false },
    { text: false, isImage: true },
    { text: 'Warenumschlag:<br> 580.000 t/p.a.', bgColorClass: 'bg-red', isImage: false },
    { text: 'Umsatz: 1,0<br> Mrd. Europa p.a.', bgColorClass: 'bg-purple', isImage: false },
    { text: false, isImage: true },
    { text: 'Logistik: 100%<br> LKW-Verkehr,<br> 1.200 LKW p.M.,<br> 8.500 Kunden-Lieferfahrzeuge p.M.', bgColorClass: 'bg-orange', isImage: false },
    { text: false, isImage: true }
  ]
} %}

{% macro AboutAsSection(settings = {}) %}
  {% set settings = merge(ABOUT_AS_DEFAULTS, settings) %}

  {% call Section({
    className: 'about-us',
    containerClassName: 'container container--xl',
    title: false
  }) %}
    <ul class="about-us__list">
      {% for item in settings.aboutUsList %}
        <li class="about-us__item {{ item.bgColorClass }}">
          {% if item.isImage %}
            {{ Image({
              className: 'about-us__item-image',
              sources: [],
              image: {
                src: '337x337'
              }
            }) }}
          {% else %}
            <span class="about-us__item-text">{{ item.text | safe }}</span>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  {% endcall %}
{% endmacro %}