{{#small_teaser}}
<article
  class="teaser teaser__searchResult teaser__contentWrapper hasLink teaser--cardImage"
>
  <a
    href="{{link}}"
    class="teaser__link"
    aria-label="{{title}} {{subtitle}}"
  ></a>
  {{#imageRatio11}}
  <div class="teaser__media">
    <figure class="figure image-with-hover">
      <div class="figure__gradientLayer"></div>
      <span
        class="picture"
        data-class="img-responsive"
        data-alt="{{alt}}"
        data-container="figure"
      >
        {{#renditions}} {{#default}}
        <img
          loading="lazy"
          class="img-responsive"
          alt="{{alt}}"
          src="{{lg-1'}}"
          sizes="(max-width: 576px) 100vw, (max-width: 992px) 50vw, (max-width: 1400px) 33vw, (max-width: 6000px) 420px"
          srcset="{{lg-1}} {{lg-1-width}}w, {{lg-2}} {{lg-2-width}}w, {{lg-3}} {{lg-3-width}}w, {{lg-4}} {{lg-4-width}}w, {{lg-5}} {{lg-5-width}}w, {{lg-6}} {{lg-6-width}}w, {{lg-7}} {{lg-7-width}}w"
        />
        {{#showCopyright}} {{#copyright}}
        <small class="figure__copyright">&copy; {{.}}</small>
        {{/copyright}} {{/showCopyright}} {{/default}} {{/renditions}}
      </span>
    </figure>
  </div>
  {{/imageRatio11}}
  <div class="teaser__text">
    {{#showLabels}}
    <div class="teaser__badgeWrapper">
      {{#labelModelList}}
      <a
        target="{{target}}"
        class="badge badge--red badge--hasLink"
        href="{{link}}"
        >{{label}}</a
      >
      {{/labelModelList}}
    </div>
    {{/showLabels}}

    <h3 class="teaser__headline">{{{title}}}</h3>
    {{#subtitle}}
    <div class="teaser__content">{{.}}</div>
    {{/subtitle}}
    <div class="teaser__additionalContent">
      {{#showDate}} {{#stringDate}}
      <span class="js-date-formatter">{{.}}</span>
      {{/stringDate}} {{#separatorRenderCondition}}
      <span class="teaser__additionalContent--dot">•</span>
      {{/separatorRenderCondition}} {{/showDate}} {{#readTime}}
      <span>{{.}}</span>
      {{/readTime}}
    </div>
  </div>
</article>
{{/small_teaser}}

{{#small_teaser_without_intro}}
<article
  class="teaser teaser__searchResult teaser__contentWrapper hasLink teaser--cardImage"
>
  <a
    href="{{link}}"
    class="teaser__link"
    aria-label="{{title}} {{subtitle}}"
  ></a>
  {{#imageRatio11}}
  <div class="teaser__media">
    <figure class="figure image-with-hover">
      <div class="figure__gradientLayer"></div>
      <span
        class="picture"
        data-class="img-responsive"
        data-alt="{{alt}}"
        data-container="figure"
      >
        {{#renditions}} {{#default}}
        <img
          loading="lazy"
          class="img-responsive"
          alt="{{alt}}"
          src="{{lg-1'}}"
          sizes="(max-width: 576px) 100vw, (max-width: 992px) 50vw, (max-width: 1400px) 33vw, (max-width: 6000px) 420px"
          srcset="{{lg-1}} {{lg-1-width}}w, {{lg-2}} {{lg-2-width}}w, {{lg-3}} {{lg-3-width}}w, {{lg-4}} {{lg-4-width}}w, {{lg-5}} {{lg-5-width}}w, {{lg-6}} {{lg-6-width}}w, {{lg-7}} {{lg-7-width}}w"
        />
        {{#showCopyright}} {{#copyright}}
        <small class="figure__copyright">&copy; {{.}}</small>
        {{/copyright}} {{/showCopyright}} {{/default}} {{/renditions}}
      </span>
    </figure>
  </div>
  {{/imageRatio11}}
  <div class="teaser__text">
    {{#showLabels}}
    <div class="teaser__badgeWrapper">
      {{#labelModelList}}
      <a
        target="{{target}}"
        class="badge badge--red badge--hasLink"
        href="{{link}}"
        >{{label}}</a
      >
      {{/labelModelList}}
    </div>
    {{/showLabels}}

    <h3 class="teaser__headline">{{{title}}}</h3>
    <div class="teaser__additionalContent">
      {{#showDate}} {{#stringDate}}
      <span class="js-date-formatter">{{.}}</span>
      {{/stringDate}} {{#separatorRenderCondition}}
      <span class="teaser__additionalContent--dot">•</span>
      {{/separatorRenderCondition}} {{/showDate}} {{#readTime}}
      <span>{{.}}</span>
      {{/readTime}}
    </div>
  </div>
</article>
{{/small_teaser_without_intro}}

{{#story_teaser}}
<article class="teaser js-teaser teaser--story teaser--story--swiper hasLink">
  <a
    href="{{link}}"
    class="teaser__link"
    aria-label="{{title}} {{subtitle}}"
  ></a>
  {{#imageRatio169}}
  <div class="teaser__media image-with-hover">
    <figure class="figure">
      <div class="figure__gradientLayer"></div>
      {{#renditions}} {{#default}}
      <img
        class="img-responsive"
        loading="lazy"
        alt="{{alt}}"
        src="{{lg-1'}}"
        sizes="(max-width: 576px) 100vw, (max-width: 992px) 50vw, (max-width: 1400px) 33vw, (max-width: 6000px) 420px"
        srcset="{{lg-1}} {{lg-1-width}}w, {{lg-2}} {{lg-2-width}}w, {{lg-3}} {{lg-3-width}}w, {{lg-4}} {{lg-4-width}}w, {{lg-5}} {{lg-5-width}}w, {{lg-6}} {{lg-6-width}}w, {{lg-7}} {{lg-7-width}}w"
      />

      {{#showCopyright}} {{#copyright}}
      <small class="figure__copyright">&copy; {{.}}</small>
      {{/copyright}} {{/showCopyright}} {{/default}} {{/renditions}}
    </figure>
  </div>
  {{/imageRatio169}}
  <div class="teaser__contentWrapper">
    {{#showLabels}}
    <div class="teaser__badgeWrapper">
      {{#labelModelList}}
      <a
        target="{{target}}"
        class="badge badge--red badge--hasLink"
        href="{{link}}"
        >{{label}}</a
      >
      {{/labelModelList}}
    </div>
    {{/showLabels}}
    <h3 class="teaser__headline">{{{title}}}</h3>
    {{#subtitle}}
    <div class="teaser__content">{{.}}</div>
    {{/subtitle}}
    <div class="teaser__additionalContent">
      {{#showDate}} {{#stringDate}}
      <span class="js-date-formatter">{{.}}</span>
      {{/stringDate}} {{#separatorRenderCondition}}
      <span class="teaser__additionalContent--dot">•</span>
      {{/separatorRenderCondition}} {{/showDate}} {{#readTime}}
      <span>{{.}}</span>
      {{/readTime}}
    </div>
  </div>
</article>
{{/story_teaser}}

{{#big_teaser}}
<article class="teaser js-teaser teaser--big teaser--story--swiper hasLink">
  {{#imageRatio11}}
  <div class="teaser__media image-ratio-11 hasLink">
    <a
      href="{{link}}"
      class="teaser__link"
      aria-label="{{title}} {{subtitle}}"
    ></a>
    <figure class="figure image-with-hover">
      <div class="figure__gradientLayer"></div>
      <span
        class="picture"
        data-class="img-responsive"
        data-alt="{{alt}}"
        data-container="figure"
      >
        {{#renditions}} {{#default}}
        <img
          loading="lazy"
          class="img-responsive"
          alt="{{alt}}"
          src="{{lg-1'}}"
          sizes="(max-width: 576px) 100vw, (max-width: 992px) 50vw, (max-width: 1400px) 33vw, (max-width: 6000px) 420px"
          srcset="{{lg-1}} {{lg-1-width}}w, {{lg-2}} {{lg-2-width}}w, {{lg-3}} {{lg-3-width}}w, {{lg-4}} {{lg-4-width}}w, {{lg-5}} {{lg-5-width}}w, {{lg-6}} {{lg-6-width}}w, {{lg-7}} {{lg-7-width}}w"
        />
        {{#showCopyright}} {{#copyright}}
        <small class="figure__copyright">&copy; {{.}}</small>
        {{/copyright}} {{/showCopyright}} {{/default}} {{/renditions}}
      </span>
    </figure>
  </div>
  {{/imageRatio11}}
  {{#imageRatio43}}
  <div class="teaser__media image-ratio-43 hasLink">
    <figure class="figure">
      <a
        href="{{link}}"
        class="teaser__link"
        aria-label="{{title}} {{subtitle}}"
      ></a>
      <div class="figure__gradientLayer image-with-hover"></div>
      {{#renditions}} {{#default}}
      <img
        class="img-responsive"
        loading="lazy"
        alt="{{alt}}"
        src="{{lg-1'}}"
        sizes="(max-width: 576px) 100vw, (max-width: 992px) 50vw, (max-width: 1400px) 33vw, (max-width: 6000px) 420px"
        srcset="{{lg-1}} {{lg-1-width}}w, {{lg-2}} {{lg-2-width}}w, {{lg-3}} {{lg-3-width}}w, {{lg-4}} {{lg-4-width}}w, {{lg-5}} {{lg-5-width}}w, {{lg-6}} {{lg-6-width}}w, {{lg-7}} {{lg-7-width}}w"
      />

      {{#showCopyright}} {{#copyright}}
      <small class="figure__copyright">&copy; {{.}}</small>
      {{/copyright}} {{/showCopyright}} {{/default}} {{/renditions}}
    </figure>
  </div>
  {{/imageRatio43}}
  {{#imageRatio169}}
  <div class="teaser__media image-ratio-169 hasLink">
    <a
      href="{{link}}"
      class="teaser__link"
      aria-label="{{title}} {{subtitle}}"
    ></a>
    <figure class="figure">
      <div class="figure__gradientLayer"></div>
      {{#renditions}} {{#default}}
      <img
        class="img-responsive"
        loading="lazy"
        alt="{{alt}}"
        src="{{lg-1'}}"
        sizes="(max-width: 576px) 100vw, (max-width: 992px) 50vw, (max-width: 1400px) 33vw, (max-width: 6000px) 420px"
        srcset="{{lg-1}} {{lg-1-width}}w, {{lg-2}} {{lg-2-width}}w, {{lg-3}} {{lg-3-width}}w, {{lg-4}} {{lg-4-width}}w, {{lg-5}} {{lg-5-width}}w, {{lg-6}} {{lg-6-width}}w, {{lg-7}} {{lg-7-width}}w"
      />

      {{#showCopyright}} {{#copyright}}
      <small class="figure__copyright">&copy; {{.}}</small>
      {{/copyright}} {{/showCopyright}} {{/default}} {{/renditions}}
    </figure>
  </div>
  {{/imageRatio169}}
  <div class="teaser__contentWrapper">
    {{#showLabels}}
    <div class="teaser__badgeWrapper">
      {{#labelModelList}}
      <a
        target="{{target}}"
        class="badge badge--red badge--hasLink"
        href="{{link}}"
        >{{label}}</a
      >
      {{/labelModelList}}
    </div>
    {{/showLabels}}
    <h3 class="teaser__headline">{{{title}}}</h3>
    {{#subtitle}}
    <div class="teaser__content">{{.}}</div>
    {{/subtitle}}
    <div class="teaser__additionalContent">
      {{#showDate}} {{#stringDate}}
      <span class="js-date-formatter">{{.}}</span>
      {{/stringDate}} {{#separatorRenderCondition}}
      <span class="teaser__additionalContent--dot">•</span>
      {{/separatorRenderCondition}} {{/showDate}} {{#readTime}}
      <span>{{.}}</span>
      {{/readTime}}
    </div>
    {{#bigTeaserButtonLink}} {{#bigTeaserButtonText}}
    <div class="teaser__button">
      <a href="{{bigTeaserButtonLink}}" target="{{bigTeaserButtonTarget}}" class="button">{{bigTeaserButtonText}}</a>
    </div>
    {{/bigTeaserButtonText}} {{/bigTeaserButtonLink}}
  </div>
</article>
{{/big_teaser}}