Photo Title
Photo Description
Photo Title
Photo Description
Photo Title
Photo Description
Photo Title
Photo Description
<section class="s-photoGallery">
<ul class="l-flexTiles s-photoGallery__cards" data-min-width="232" data-max-width="345">
<li class="l-flexTiles__item" data-index="0">
<div class="c-photoGalleryCard" data-modalphoto="/fpo/1200/1200/">
<picture class="c-photoGalleryCard__photo e-picture" id="js-picture" data-dragdrop="true">
<source srcset="/fpo/312/312/" media="(max-width:32em)" />
<img src="/fpo/512/351/" alt="Alternate Text" />
</picture>
<p class="c-photoGalleryCard__title">Photo Title</p>
<p class="c-photoGalleryCard__description">Photo Description</p>
</div>
</li>
<li class="l-flexTiles__item" data-index="1">
<div class="c-photoGalleryCard" data-modalphoto="/fpo/2400/1500/">
<picture class="c-photoGalleryCard__photo e-picture" id="js-picture" data-dragdrop="true">
<source srcset="/fpo/312/312/" media="(max-width:32em)" />
<img src="/fpo/512/351/" alt="Alternate Text" />
</picture>
<p class="c-photoGalleryCard__title">Photo Title</p>
<p class="c-photoGalleryCard__description">Photo Description</p>
</div>
</li>
<li class="l-flexTiles__item" data-index="2">
<div class="c-photoGalleryCard" data-modalphoto="/fpo/1000/1600/">
<picture class="c-photoGalleryCard__photo e-picture" id="js-picture" data-dragdrop="true">
<source srcset="/fpo/312/312/" media="(max-width:32em)" />
<img src="/fpo/512/351/" alt="Alternate Text" />
</picture>
<p class="c-photoGalleryCard__title">Photo Title</p>
<p class="c-photoGalleryCard__description">Photo Description</p>
</div>
</li>
<li class="l-flexTiles__item" data-index="3">
<div class="c-photoGalleryCard" data-modalphoto="/fpo/1500/2400/">
<picture class="c-photoGalleryCard__photo e-picture" id="js-picture" data-dragdrop="true">
<source srcset="/fpo/312/312/" media="(max-width:32em)" />
<img src="/fpo/512/351/" alt="Alternate Text" />
</picture>
<p class="c-photoGalleryCard__title">Photo Title</p>
<p class="c-photoGalleryCard__description">Photo Description</p>
</div>
</li>
</ul>
<div class="s-photoGallery__controls">
<button class="s-photoGallery__controls__left">
<svg width="32" height="32" aria-hidden="true" viewBox="0 0 32 32">
<path d="M1 0h30a1 1 0 0 1 1 1v30a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm8.35 16.34l8.49 8.48a.5.5 0 0 0 .71 0l2.12-2.12a.5.5 0 0 0 0-.7l-5.84-5.84a.26.26 0 0 1 0-.35L20.67 10a.5.5 0 0 0 0-.7l-2.12-2.15a.5.5 0 0 0-.71 0l-8.49 8.48a.51.51 0 0 0 0 .71z"></path>
</svg>
</button>
<button class="s-photoGallery__controls__right">
<svg width="32" height="32" aria-hidden="true" viewBox="0 0 32 32">
<path d="M1 0h30a1 1 0 0 1 1 1v30a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm21.46 16.34a.5.5 0 0 0 0-.71L14 7.15a.48.48 0 0 0-.7 0l-2.15 2.12a.48.48 0 0 0 0 .7L17 15.81a.24.24 0 0 1 0 .35L11.15 22a.48.48 0 0 0 0 .7l2.12 2.12a.48.48 0 0 0 .7 0z"></path>
</svg>
</button>
</div>
</section>