<div class="cic-wrapper castorcito-basepack--item">
  <div class="castorcito-basepack--inner">
    {% if component_data.fields.title.value is not empty %}
    <div class="basepack-cic--title-container">
      <h3 class="basepack-cic--title">{{ component_data.fields.title.value }}</h3>
    </div>
    {% endif %}
    {% if component_data.fields.subtitle.value is not empty %}
      <h4 class="basepack-cic--subtitle">{{ component_data.fields.subtitle.value }}</h4>
    {% endif %}
    {% if component_data.fields.description.value is not empty  %}
      <div class="basepack-cic--description">
      {% embed "castorcito:castorcito_formatted_text" with {
        cfield_data: component_data.fields.description
      } %}
      {% endembed %}
      </div>
    {% endif %}
    <div class="basepack-cic-items {{ display_settings.display_options.items_per_row ? 'cic-items-fixed cic-items-' ~ display_settings.display_options.items_per_row }}">
    {% for item in component_data.fields.content_item.items %}
      <div class="basepack-cic-item ">
        <div class="basepack-cic-item--content">
          <div class="basepack-cic-item--inner">
            {% if item.fields.image.value is not empty %}
            <div class="basepack-cic--item--image">
              {% embed "castorcito:castorcito_image" with {
                cfield_data: item.fields.image,
                cfield_display_settings: display_settings.cfields.content_item[item.type].cfields.image
              } %}
              {% endembed %}
            </div>
            {% endif %}
            {% if item.fields.title.value is not empty %}
            <div class="basepack-cic-item--title-container">
              <h3 class="basepack-cic-item--title">{{ item.fields.title.value }}</h3>
            </div>
            {% endif %}
            {% if item.fields.text.value is not empty %}
            <div class="basepack-cic-item--text-container">
              {% embed "castorcito:castorcito_formatted_text" with {
       			    cfield_data: item.fields.text
                } %}
              {% endembed %}
            </div>
            {% endif %}
            {% if item.fields.link.value is not empty %}
            <div class="basepack-cic--item--link-wrapper">
              <a class="basepack-cic--item--link" 
                href="{{ item.fields.link.external
                        ? item.fields.link.value
                        : drupal_url(item.fields.link.relative) }}"
                {{ item.fields.link.target ? 'target=' ~ item.fields.link.target }}>
                {{ item.fields.link.text }}
              </a>
            </div>
            {% endif %}
          </div>
        </div>
      </div>
    {% endfor %}
    </div>
    {% if component_data.fields.link.value is not empty %}
    <div class="basepack-cic--link-wrapper">
      <a class="basepack-cic--link" 
        href="{{ component_data.fields.link.external
                ? component_data.fields.link.value
                : drupal_url(component_data.fields.link.relative) }}"
        {{ component_data.fields.link.target ? 'target=' ~ component_data.fields.link.target }}>
        {{ component_data.fields.link.text }}
      </a>
    </div>
    {% endif %}
  </div>
</div>
