Markup: templates/output/06-components/gallery.html
<!-- Grid/ Element container-->
<div class="frame frame-type-gallery" id="c10344" data-scrollspysection="1">
<div class="container">
<!-- Grid/ Element header-->
<header class="frame__header">
<h2>Masonry</h2>
</header>
<div class="u-hide-desktop">
<!-- Grid/ Element container-->
<div class="frame frame-type-" id="c41106" data-scrollspysection="1">
<div class="container">
<div class="c-slider c-slider--gallery">
<section class="splide c-slider__section" aria-label="Image-gallery Slider">
<div class="c-slider__track splide__track">
<ul class="c-slider__list splide__list">
<li class="c-slider__slide splide__slide">
<figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x487" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x487" width="650" height="487" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
<figure class="image-caption">
<p>Bildunterschrift: Beschreibung des Bildinhalts</p>
<div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
<details>
<summary>
<div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
</summary>
<section class="image-caption__section">
<header><span class="h5">Fotodaten</span>
<button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
<use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
</svg>
</button>
</header>
<div class="table-rwd">
<div class="table-rwd__overflow">
<table class="image-caption__metadata-table">
<tbody>
<tr>
<th scope="row">Künstler</th>
<td>Andreas Schlote</td>
</tr>
<tr>
<th scope="row">xmp.photoshop:Headline</th>
<td>Bildmaterial Hochschule RheinMain</td>
</tr>
<tr></tr>
<tr>
<th scope="row">xmp.xmpRights:Marked</th>
<td>true</td>
</tr>
<tr>
<th scope="row">Copyright</th>
<td>© Andreas Schlote</td>
</tr>
<tr>
<th scope="row">Nutzungsbedingungen</th>
<td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</details>
</div>
</figure>
</figure>
</li>
<li class="c-slider__slide splide__slide">
<figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/750x450" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/750x450" width="750" height="450" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
<figure class="image-caption">
<p>Bildunterschrift: Beschreibung des Bildinhalts</p>
<div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
<details>
<summary>
<div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
</summary>
<section class="image-caption__section">
<header><span class="h5">Fotodaten</span>
<button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
<use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
</svg>
</button>
</header>
<div class="table-rwd">
<div class="table-rwd__overflow">
<table class="image-caption__metadata-table">
<tbody>
<tr>
<th scope="row">Künstler</th>
<td>Andreas Schlote</td>
</tr>
<tr>
<th scope="row">xmp.photoshop:Headline</th>
<td>Bildmaterial Hochschule RheinMain</td>
</tr>
<tr></tr>
<tr>
<th scope="row">xmp.xmpRights:Marked</th>
<td>true</td>
</tr>
<tr>
<th scope="row">Copyright</th>
<td>© Andreas Schlote</td>
</tr>
<tr>
<th scope="row">Nutzungsbedingungen</th>
<td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</details>
</div>
</figure>
</figure>
</li>
<li class="c-slider__slide splide__slide">
<figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
<figure class="image-caption">
<p>Bildunterschrift: Beschreibung des Bildinhalts</p>
<div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
<details>
<summary>
<div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
</summary>
<section class="image-caption__section">
<header><span class="h5">Fotodaten</span>
<button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
<use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
</svg>
</button>
</header>
<div class="table-rwd">
<div class="table-rwd__overflow">
<table class="image-caption__metadata-table">
<tbody>
<tr>
<th scope="row">Künstler</th>
<td>Andreas Schlote</td>
</tr>
<tr>
<th scope="row">xmp.photoshop:Headline</th>
<td>Bildmaterial Hochschule RheinMain</td>
</tr>
<tr></tr>
<tr>
<th scope="row">xmp.xmpRights:Marked</th>
<td>true</td>
</tr>
<tr>
<th scope="row">Copyright</th>
<td>© Andreas Schlote</td>
</tr>
<tr>
<th scope="row">Nutzungsbedingungen</th>
<td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</details>
</div>
</figure>
</figure>
</li>
<li class="c-slider__slide splide__slide">
<figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
<figure class="image-caption">
<p>Bildunterschrift: Beschreibung des Bildinhalts</p>
<div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
<details>
<summary>
<div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
</summary>
<section class="image-caption__section">
<header><span class="h5">Fotodaten</span>
<button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
<use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
</svg>
</button>
</header>
<div class="table-rwd">
<div class="table-rwd__overflow">
<table class="image-caption__metadata-table">
<tbody>
<tr>
<th scope="row">Künstler</th>
<td>Andreas Schlote</td>
</tr>
<tr>
<th scope="row">xmp.photoshop:Headline</th>
<td>Bildmaterial Hochschule RheinMain</td>
</tr>
<tr></tr>
<tr>
<th scope="row">xmp.xmpRights:Marked</th>
<td>true</td>
</tr>
<tr>
<th scope="row">Copyright</th>
<td>© Andreas Schlote</td>
</tr>
<tr>
<th scope="row">Nutzungsbedingungen</th>
<td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</details>
</div>
</figure>
</figure>
</li>
<li class="c-slider__slide splide__slide">
<figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x650" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x650" width="650" height="650" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
<figure class="image-caption">
<p>Bildunterschrift: Beschreibung des Bildinhalts</p>
<div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
<details>
<summary>
<div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
</summary>
<section class="image-caption__section">
<header><span class="h5">Fotodaten</span>
<button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
<use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
</svg>
</button>
</header>
<div class="table-rwd">
<div class="table-rwd__overflow">
<table class="image-caption__metadata-table">
<tbody>
<tr>
<th scope="row">Künstler</th>
<td>Andreas Schlote</td>
</tr>
<tr>
<th scope="row">xmp.photoshop:Headline</th>
<td>Bildmaterial Hochschule RheinMain</td>
</tr>
<tr></tr>
<tr>
<th scope="row">xmp.xmpRights:Marked</th>
<td>true</td>
</tr>
<tr>
<th scope="row">Copyright</th>
<td>© Andreas Schlote</td>
</tr>
<tr>
<th scope="row">Nutzungsbedingungen</th>
<td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</details>
</div>
</figure>
</figure>
</li>
<li class="c-slider__slide splide__slide">
<figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
<figure class="image-caption">
<p>Bildunterschrift: Beschreibung des Bildinhalts</p>
<div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
<details>
<summary>
<div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
</summary>
<section class="image-caption__section">
<header><span class="h5">Fotodaten</span>
<button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
<use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
</svg>
</button>
</header>
<div class="table-rwd">
<div class="table-rwd__overflow">
<table class="image-caption__metadata-table">
<tbody>
<tr>
<th scope="row">Künstler</th>
<td>Andreas Schlote</td>
</tr>
<tr>
<th scope="row">xmp.photoshop:Headline</th>
<td>Bildmaterial Hochschule RheinMain</td>
</tr>
<tr></tr>
<tr>
<th scope="row">xmp.xmpRights:Marked</th>
<td>true</td>
</tr>
<tr>
<th scope="row">Copyright</th>
<td>© Andreas Schlote</td>
</tr>
<tr>
<th scope="row">Nutzungsbedingungen</th>
<td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</details>
</div>
</figure>
</figure>
</li>
<li class="c-slider__slide splide__slide">
<figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x488" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x488" width="650" height="488" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
<figure class="image-caption">
<p>Bildunterschrift: Beschreibung des Bildinhalts</p>
<div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
<details>
<summary>
<div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
</summary>
<section class="image-caption__section">
<header><span class="h5">Fotodaten</span>
<button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
<use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
</svg>
</button>
</header>
<div class="table-rwd">
<div class="table-rwd__overflow">
<table class="image-caption__metadata-table">
<tbody>
<tr>
<th scope="row">Künstler</th>
<td>Andreas Schlote</td>
</tr>
<tr>
<th scope="row">xmp.photoshop:Headline</th>
<td>Bildmaterial Hochschule RheinMain</td>
</tr>
<tr></tr>
<tr>
<th scope="row">xmp.xmpRights:Marked</th>
<td>true</td>
</tr>
<tr>
<th scope="row">Copyright</th>
<td>© Andreas Schlote</td>
</tr>
<tr>
<th scope="row">Nutzungsbedingungen</th>
<td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</details>
</div>
</figure>
</figure>
</li>
<li class="c-slider__slide splide__slide">
<figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x650" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x650" width="650" height="650" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
<figure class="image-caption">
<p>Bildunterschrift: Beschreibung des Bildinhalts</p>
<div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
<details>
<summary>
<div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
</summary>
<section class="image-caption__section">
<header><span class="h5">Fotodaten</span>
<button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
<use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
</svg>
</button>
</header>
<div class="table-rwd">
<div class="table-rwd__overflow">
<table class="image-caption__metadata-table">
<tbody>
<tr>
<th scope="row">Künstler</th>
<td>Andreas Schlote</td>
</tr>
<tr>
<th scope="row">xmp.photoshop:Headline</th>
<td>Bildmaterial Hochschule RheinMain</td>
</tr>
<tr></tr>
<tr>
<th scope="row">xmp.xmpRights:Marked</th>
<td>true</td>
</tr>
<tr>
<th scope="row">Copyright</th>
<td>© Andreas Schlote</td>
</tr>
<tr>
<th scope="row">Nutzungsbedingungen</th>
<td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</details>
</div>
</figure>
</figure>
</li>
<li class="c-slider__slide splide__slide">
<figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
<figure class="image-caption">
<p>Bildunterschrift: Beschreibung des Bildinhalts</p>
<div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
<details>
<summary>
<div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
</summary>
<section class="image-caption__section">
<header><span class="h5">Fotodaten</span>
<button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
<use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
</svg>
</button>
</header>
<div class="table-rwd">
<div class="table-rwd__overflow">
<table class="image-caption__metadata-table">
<tbody>
<tr>
<th scope="row">Künstler</th>
<td>Andreas Schlote</td>
</tr>
<tr>
<th scope="row">xmp.photoshop:Headline</th>
<td>Bildmaterial Hochschule RheinMain</td>
</tr>
<tr></tr>
<tr>
<th scope="row">xmp.xmpRights:Marked</th>
<td>true</td>
</tr>
<tr>
<th scope="row">Copyright</th>
<td>© Andreas Schlote</td>
</tr>
<tr>
<th scope="row">Nutzungsbedingungen</th>
<td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</details>
</div>
</figure>
</figure>
</li>
<li class="c-slider__slide splide__slide">
<figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x488" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x488" width="650" height="488" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
<figure class="image-caption">
<p>Bildunterschrift: Beschreibung des Bildinhalts</p>
<div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
<details>
<summary>
<div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
</summary>
<section class="image-caption__section">
<header><span class="h5">Fotodaten</span>
<button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
<use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
</svg>
</button>
</header>
<div class="table-rwd">
<div class="table-rwd__overflow">
<table class="image-caption__metadata-table">
<tbody>
<tr>
<th scope="row">Künstler</th>
<td>Andreas Schlote</td>
</tr>
<tr>
<th scope="row">xmp.photoshop:Headline</th>
<td>Bildmaterial Hochschule RheinMain</td>
</tr>
<tr></tr>
<tr>
<th scope="row">xmp.xmpRights:Marked</th>
<td>true</td>
</tr>
<tr>
<th scope="row">Copyright</th>
<td>© Andreas Schlote</td>
</tr>
<tr>
<th scope="row">Nutzungsbedingungen</th>
<td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</details>
</div>
</figure>
</figure>
</li>
<li class="c-slider__slide splide__slide">
<figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
<figure class="image-caption">
<p>Bildunterschrift: Beschreibung des Bildinhalts</p>
<div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
<details>
<summary>
<div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
</summary>
<section class="image-caption__section">
<header><span class="h5">Fotodaten</span>
<button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
<use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
</svg>
</button>
</header>
<div class="table-rwd">
<div class="table-rwd__overflow">
<table class="image-caption__metadata-table">
<tbody>
<tr>
<th scope="row">Künstler</th>
<td>Andreas Schlote</td>
</tr>
<tr>
<th scope="row">xmp.photoshop:Headline</th>
<td>Bildmaterial Hochschule RheinMain</td>
</tr>
<tr></tr>
<tr>
<th scope="row">xmp.xmpRights:Marked</th>
<td>true</td>
</tr>
<tr>
<th scope="row">Copyright</th>
<td>© Andreas Schlote</td>
</tr>
<tr>
<th scope="row">Nutzungsbedingungen</th>
<td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</details>
</div>
</figure>
</figure>
</li>
<li class="c-slider__slide splide__slide">
<figure class="image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-gallery-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
<figure class="image-caption">
<p>Bildunterschrift: Beschreibung des Bildinhalts</p>
<div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
<details>
<summary>
<div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
</summary>
<section class="image-caption__section">
<header><span class="h5">Fotodaten</span>
<button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
<use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
</svg>
</button>
</header>
<div class="table-rwd">
<div class="table-rwd__overflow">
<table class="image-caption__metadata-table">
<tbody>
<tr>
<th scope="row">Künstler</th>
<td>Andreas Schlote</td>
</tr>
<tr>
<th scope="row">xmp.photoshop:Headline</th>
<td>Bildmaterial Hochschule RheinMain</td>
</tr>
<tr></tr>
<tr>
<th scope="row">xmp.xmpRights:Marked</th>
<td>true</td>
</tr>
<tr>
<th scope="row">Copyright</th>
<td>© Andreas Schlote</td>
</tr>
<tr>
<th scope="row">Nutzungsbedingungen</th>
<td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</details>
</div>
</figure>
</figure>
</li>
</ul>
</div>
<div class="c-slider__buttons splide__arrows container">
<button class="c-slider__button c-slider__arrow c-slider__button--prev splide__arrow splide__arrow--prev" type="button">
<svg class="c-slider__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
<use xlink:href="/Images/svg/sprite.symbol.svg#chevron-left"></use>
</svg>
</button>
<button class="c-slider__button c-slider__arrow c-slider__button--next splide__arrow splide__arrow--next" type="button">
<svg class="c-slider__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
<use xlink:href="/Images/svg/sprite.symbol.svg#chevron-right"></use>
</svg>
</button>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="u-hide-mobile">
<div class="c-gallery">
<div class="c-gallery__image-wrapper">
<figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x487" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x487" width="650" height="487" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
<figure class="image-caption">
<p>Bildunterschrift: Beschreibung des Bildinhalts</p>
<div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
<details>
<summary>
<div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
</summary>
<section class="image-caption__section">
<header><span class="h5">Fotodaten</span>
<button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
<use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
</svg>
</button>
</header>
<div class="table-rwd">
<div class="table-rwd__overflow">
<table class="image-caption__metadata-table">
<tbody>
<tr>
<th scope="row">Künstler</th>
<td>Andreas Schlote</td>
</tr>
<tr>
<th scope="row">xmp.photoshop:Headline</th>
<td>Bildmaterial Hochschule RheinMain</td>
</tr>
<tr></tr>
<tr>
<th scope="row">xmp.xmpRights:Marked</th>
<td>true</td>
</tr>
<tr>
<th scope="row">Copyright</th>
<td>© Andreas Schlote</td>
</tr>
<tr>
<th scope="row">Nutzungsbedingungen</th>
<td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</details>
</div>
</figure>
</figure>
</div>
<div class="c-gallery__image-wrapper">
<figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/750x450" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/750x450" width="750" height="450" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
</figure>
</div>
<div class="c-gallery__image-wrapper">
<figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
<figure class="image-caption">
<p>Bildunterschrift: Beschreibung des Bildinhalts</p>
<div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
<details>
<summary>
<div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
</summary>
<section class="image-caption__section">
<header><span class="h5">Fotodaten</span>
<button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
<use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
</svg>
</button>
</header>
<div class="table-rwd">
<div class="table-rwd__overflow">
<table class="image-caption__metadata-table">
<tbody>
<tr>
<th scope="row">Künstler</th>
<td>Andreas Schlote</td>
</tr>
<tr>
<th scope="row">xmp.photoshop:Headline</th>
<td>Bildmaterial Hochschule RheinMain</td>
</tr>
<tr></tr>
<tr>
<th scope="row">xmp.xmpRights:Marked</th>
<td>true</td>
</tr>
<tr>
<th scope="row">Copyright</th>
<td>© Andreas Schlote</td>
</tr>
<tr>
<th scope="row">Nutzungsbedingungen</th>
<td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</details>
</div>
</figure>
</figure>
</div>
<div class="c-gallery__image-wrapper">
<figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
</figure>
</div>
<div class="c-gallery__image-wrapper">
<figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x650" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x650" width="650" height="650" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
<figure class="image-caption">
<p>Bildunterschrift: Beschreibung des Bildinhalts</p>
<div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
<details>
<summary>
<div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
</summary>
<section class="image-caption__section">
<header><span class="h5">Fotodaten</span>
<button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
<use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
</svg>
</button>
</header>
<div class="table-rwd">
<div class="table-rwd__overflow">
<table class="image-caption__metadata-table">
<tbody>
<tr>
<th scope="row">Künstler</th>
<td>Andreas Schlote</td>
</tr>
<tr>
<th scope="row">xmp.photoshop:Headline</th>
<td>Bildmaterial Hochschule RheinMain</td>
</tr>
<tr></tr>
<tr>
<th scope="row">xmp.xmpRights:Marked</th>
<td>true</td>
</tr>
<tr>
<th scope="row">Copyright</th>
<td>© Andreas Schlote</td>
</tr>
<tr>
<th scope="row">Nutzungsbedingungen</th>
<td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</details>
</div>
</figure>
</figure>
</div>
<div class="c-gallery__image-wrapper">
<figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
</figure>
</div>
<div class="c-gallery__image-wrapper">
<figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x488" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x488" width="650" height="488" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
<figure class="image-caption">
<p>Bildunterschrift: Beschreibung des Bildinhalts</p>
<div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
<details>
<summary>
<div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
</summary>
<section class="image-caption__section">
<header><span class="h5">Fotodaten</span>
<button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
<use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
</svg>
</button>
</header>
<div class="table-rwd">
<div class="table-rwd__overflow">
<table class="image-caption__metadata-table">
<tbody>
<tr>
<th scope="row">Künstler</th>
<td>Andreas Schlote</td>
</tr>
<tr>
<th scope="row">xmp.photoshop:Headline</th>
<td>Bildmaterial Hochschule RheinMain</td>
</tr>
<tr></tr>
<tr>
<th scope="row">xmp.xmpRights:Marked</th>
<td>true</td>
</tr>
<tr>
<th scope="row">Copyright</th>
<td>© Andreas Schlote</td>
</tr>
<tr>
<th scope="row">Nutzungsbedingungen</th>
<td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</details>
</div>
</figure>
</figure>
</div>
<div class="c-gallery__image-wrapper">
<figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x650" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x650" width="650" height="650" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
</figure>
</div>
<div class="c-gallery__image-wrapper">
<figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
<figure class="image-caption">
<p>Bildunterschrift: Beschreibung des Bildinhalts</p>
<div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
<details>
<summary>
<div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
</summary>
<section class="image-caption__section">
<header><span class="h5">Fotodaten</span>
<button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
<use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
</svg>
</button>
</header>
<div class="table-rwd">
<div class="table-rwd__overflow">
<table class="image-caption__metadata-table">
<tbody>
<tr>
<th scope="row">Künstler</th>
<td>Andreas Schlote</td>
</tr>
<tr>
<th scope="row">xmp.photoshop:Headline</th>
<td>Bildmaterial Hochschule RheinMain</td>
</tr>
<tr></tr>
<tr>
<th scope="row">xmp.xmpRights:Marked</th>
<td>true</td>
</tr>
<tr>
<th scope="row">Copyright</th>
<td>© Andreas Schlote</td>
</tr>
<tr>
<th scope="row">Nutzungsbedingungen</th>
<td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</details>
</div>
</figure>
</figure>
</div>
<div class="c-gallery__image-wrapper">
<figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x488" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x488" width="650" height="488" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
</figure>
</div>
<div class="c-gallery__image-wrapper">
<figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x365" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x365" width="650" height="365" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
<figure class="image-caption">
<p>Bildunterschrift: Beschreibung des Bildinhalts</p>
<div class="u-visually-hidden"><a class="image-caption__button image-caption__button--download" href="#" download="download">Bild herunterladen</a>
<details>
<summary>
<div class="image-caption__button image-caption__button--metadata">Fotodaten anzeigen</div>
</summary>
<section class="image-caption__section">
<header><span class="h5">Fotodaten</span>
<button class="image-caption__close btn" type="button" aria-label="Fotodaten schließen">
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" height="16px" width="16px">
<use xlink:href="/Images/svg/sprite.symbol.svg#cross"></use>
</svg>
</button>
</header>
<div class="table-rwd">
<div class="table-rwd__overflow">
<table class="image-caption__metadata-table">
<tbody>
<tr>
<th scope="row">Künstler</th>
<td>Andreas Schlote</td>
</tr>
<tr>
<th scope="row">xmp.photoshop:Headline</th>
<td>Bildmaterial Hochschule RheinMain</td>
</tr>
<tr></tr>
<tr>
<th scope="row">xmp.xmpRights:Marked</th>
<td>true</td>
</tr>
<tr>
<th scope="row">Copyright</th>
<td>© Andreas Schlote</td>
</tr>
<tr>
<th scope="row">Nutzungsbedingungen</th>
<td>Bitte beachten Sie Nutzungseinschränkungen und Urheberrecht für dieses Foto!<br/><a href="#">Nutzungshinweise</a><br/><a href="#">Kontakt Hochschulkommunikation</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</details>
</div>
</figure>
</figure>
</div>
<div class="c-gallery__image-wrapper">
<figure class="image c-gallery__image"><a class="lightbox" href="https://placeholder.in2code.de/650x433" data-type="image" data-zoomable="true" aria-label="Open image lightbox" data-gallery="lightbox-masonry-group" data-description=".image-caption"><img src="https://placeholder.in2code.de/650x433" width="650" height="433" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."/></a>
</figure>
</div>
</div><a class="c-gallery__download-link" href="#" download="download">Download all images</a>
</div>
</div>
</div>
Source:
assets/sass/06-components/_components.gallery.scss, line 11