<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>