<div{{ attributes.addClass(component_wrapper_class) }}>

  {{ title_prefix }}
  {% if component_wrapper.display_title.value == 1 %}
    {% if label %}
      <h2{{ title_attributes.addClass('title') }}>{{ label }}</h2>
    {% endif %}
  {% endif %}
  {{ title_suffix }}

  {% if header is not empty %}
    <div class="component-wrapper--header">
      {{ header }}
    </div>
  {% endif %}

  <div{{ content_attributes.addClass('component-wrapper--content') }}>
    <div class="article-left">
      {% for key, article in articles %}
        {% if key == 0 %}
          {{ content.field_highlight_content[key] }}
        {% endif %}
      {% endfor %}
    </div>
    <div class="articles-right">
      {% for key, article in articles %}
        {% if key > 0 and key < 3 %}
          {{ content.field_highlight_content[key] }}
        {% endif %}
      {% endfor %}
    </div>
    <div class="articles-bottom">
      {% for key, article in articles %}
        {% if key > 2 %}
          {{ content.field_highlight_content[key] }}
        {% endif %}
      {% endfor %}
    </div>
  </div>

  {% if footer is not empty %}
    <div class="component-wrapper--footer">
      {{ footer }}
    </div>
  {% endif %}

</div>
