{% set ARTICLE_ITEM_DEFAULTS = {
  title: 'Consectetuer adipiscing',
  description: 'Lorem ipsum dolor sit amet consectetur. Purus nunc imperdiet ut cursus sed vitae semper amet enim. Lorem ipsum dolor sit amet consectetur.'
} %}

{% macro ArticleItem(settings = {}) %}
  {% set settings = merge(ARTICLE_ITEM_DEFAULTS, settings) %}
  {% set classNames = [
    'article-item',
    'article-item--focus' if settings.isFocus,
    setting.className
  ] %}

  <article class="{{ setClass(classNames) }}">
    {% set imageSettings = {
      className: 'article-item__image',
      sources: [
        { media: '768', size: '340x256' }
      ],
      image: {
        src: '720x544'
      }
    } %}

    {% if settings.isFocus %}
      {% set imageSettings = {
        className: 'article-item__image',
        sources: [
          { media: '768', size: '945x714' }
        ],
        image: {
          src: '720x544'
        }
      } %}
    {% endif %}
    {{ Image(imageSettings) }}
    <div class="article-item__content">
      <div class="article-item__heading">
        <h2 class="article-item__title">
          <a href="#" class="article-item__title-link">{{ settings.title }}</a>
        </h2>
        {% if settings.teaser %}
          <p class="article-item__text">
            {{ settings.teaser | safe }}
          </p>
        {% endif %}
      </div>
      <p class="article-item__text">
        {{ settings.description | safe }}
      </p>
    </div>
  </article>
{% endmacro %}