<div class="overlay-teaser-grid overlay-teaser-grid--default">
  <div class="overlay-teaser-grid__inner">
    <div class="overlay-teaser-grid__col">
      <div class="overlay-teaser-grid__item">
        <article class="overlay-teaser overlay-teaser--big">
          <div class="overlay-teaser__image">
            <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="560" src="https://bildermangel.de/840x560/F5F5F5/28281a.png?text=840x560" width="840" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/840x560/F5F5F5/28281a.png?text=840x560" width="840" height="560" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
          </div><a class="overlay-teaser__link js-overlay-link" href="#" data-overlay-target="overlay-teaser" target="_blank">
            <div class="overlay-teaser__link-icon"><svg class="icon icon--arrow-external" viewBox="0 0 200 200">
                <use xlink:href="#icon-arrow-external"></use>
              </svg></div><span class="overlay-teaser__kicker">Verändern</span>
            <h3 class="headline headline--3 overlay-teaser__headline">Unser Jubiläumsmagazin</h3>
          </a>
        </article>
      </div>
    </div>
    <div class="overlay-teaser-grid__col">
      <div class="overlay-teaser-grid__item">
        <article class="overlay-teaser">
          <div class="overlay-teaser__image">
            <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="560" src="https://bildermangel.de/840x560/F5F5F5/28281a.png?text=840x560" width="840" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/840x560/F5F5F5/28281a.png?text=840x560" width="840" height="560" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
          </div><a class="overlay-teaser__link js-overlay-link" href="#" data-overlay-target="overlay-teaser"><span class="overlay-teaser__kicker">Verändern</span>
            <h4 class="headline headline--4 overlay-teaser__headline">Zukunft made in Baden-Württemberg</h4></a>
        </article>
      </div>
      <div class="overlay-teaser-grid__item">
        <article class="overlay-teaser">
          <div class="overlay-teaser__image">
            <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="560" src="https://bildermangel.de/840x560/F5F5F5/28281a.png?text=840x560" width="840" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/840x560/F5F5F5/28281a.png?text=840x560" width="840" height="560" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
          </div><a class="overlay-teaser__link js-overlay-link" href="#" data-overlay-target="overlay-teaser"><span class="overlay-teaser__kicker">Forschungsschiff Aldebaran</span>
            <h4 class="headline headline--4 overlay-teaser__headline">Das größte digitale Klassenzimmer</h4></a>
        </article>
      </div>
    </div>
  </div>
</div>

{
  "cols": [
    {
      "items": [
        {
          "use": "overlay-teaser--big",
          "settings": {
            "external": true
          }
        }
      ]
    },
    {
      "items": [
        {
          "use": "overlay-teaser"
        },
        {
          "use": "overlay-teaser",
          "settings": {
            "kicker": "Forschungsschiff Aldebaran",
            "headline": {
              "level": 4,
              "size": 4,
              "text": "Das größte digitale Klassenzimmer"
            }
          }
        }
      ]
    }
  ]
}

<div class="overlay-teaser-grid overlay-teaser-grid--two-columns">
  <div class="overlay-teaser-grid__inner">
    <div class="overlay-teaser-grid__col">
      <div class="overlay-teaser-grid__item">
        <article class="overlay-teaser">
          <div class="overlay-teaser__image">
            <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="560" src="https://bildermangel.de/840x560/F5F5F5/28281a.png?text=840x560" width="840" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/840x560/F5F5F5/28281a.png?text=840x560" width="840" height="560" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
          </div><a class="overlay-teaser__link js-overlay-link" href="#" data-overlay-target="overlay-teaser"><span class="overlay-teaser__kicker">Lorem ipsum</span>
            <h4 class="headline headline--4 overlay-teaser__headline">At vero eos et accusam</h4></a>
        </article>
      </div>
    </div>
    <div class="overlay-teaser-grid__col">
      <div class="overlay-teaser-grid__item">
        <article class="overlay-teaser">
          <div class="overlay-teaser__image">
            <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="560" src="https://bildermangel.de/840x560/F5F5F5/28281a.png?text=840x560" width="840" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/840x560/F5F5F5/28281a.png?text=840x560" width="840" height="560" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
          </div><a class="overlay-teaser__link js-overlay-link" href="#" data-overlay-target="overlay-teaser"><span class="overlay-teaser__kicker">Lorem ipsum</span>
            <h4 class="headline headline--4 overlay-teaser__headline">At vero eos et accusam</h4></a>
        </article>
      </div>
    </div>
  </div>
</div>

{
  "cols": [
    {
      "items": [
        {
          "use": "overlay-teaser",
          "settings": {
            "kicker": "Lorem ipsum",
            "headline": {
              "level": 4,
              "size": 4,
              "text": "At vero eos et accusam"
            }
          }
        }
      ]
    },
    {
      "items": [
        {
          "use": "overlay-teaser",
          "settings": {
            "kicker": "Lorem ipsum",
            "headline": {
              "level": 4,
              "size": 4,
              "text": "At vero eos et accusam"
            }
          }
        }
      ]
    }
  ],
  "variant": "two-columns"
}