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-1451-label">
        <div class="figure__media" data-gallery="lightbox-f47e">
          <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-1451-label">Hier steht eine Bildunterschrift (Foto: Vorname Name)</figcaption>
      </figure>
    </div>
    <div class="figure-grid__item">
      <figure class="figure" aria-labelledby="figure-8dc3-label">
        <div class="figure__media" data-gallery="lightbox-f2f1">
          <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-8dc3-label">Hier steht eine Bildunterschrift (Foto: Vorname Name)</figcaption>
      </figure>
    </div>
  </div>
</div>