Figure-Grid @figure-grid

Design
Vorschau in eignem Tab anzeigen
 
<div class="figure-grid">
  <div class="figure-grid__inner">
    <div class="figure-grid__item">
      <figure class="figure" aria-labelledby="figure-22d8-label">
        <div class="figure__media" data-gallery="lightbox-8dfe">
          <div class="image loading" style="padding-top: 52.68199233716475%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="550" src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" height="550" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
        </div>
        <figcaption class="figure__caption" id="figure-22d8-label">Hier steht eine Bildunterschrift (Foto: Vorname Name)</figcaption>
      </figure>
    </div>
    <div class="figure-grid__item">
      <figure class="figure" aria-labelledby="figure-2823-label">
        <div class="figure__media" data-gallery="lightbox-9875">
          <div class="image loading" style="padding-top: 52.68199233716475%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="550" src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" height="550" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
        </div>
        <figcaption class="figure__caption" id="figure-2823-label">Hier steht eine Bildunterschrift (Foto: Vorname Name)</figcaption>
      </figure>
    </div>
  </div>
</div>