Tile Gallery Lightbox
<button type="button" class="button button--blue button--medium" data-modal-target="tile-gallery-lightbox">
<span> Open Lightbox</span>
</button>
<div aria-hidden="true" data-modal="tile-gallery-lightbox" data-modal-size="full" data-modal-close="false" class="h-100">
<div class="bs-modal-body p-0 h-100">
<div class="bs-container-fluid p-0 h-100 bg-light bg-md-white">
<div class="bs-row bs-gx-0 h-md-100">
<div class="bs-col-12 bs-col-md bs-col-lg-9 order-1 odrder-md-0">
<div class="d-flex align-items-center h-100 mx-2 mx-md-0 mb-1 mb-md-0">
<picture class="canon-amplience lazyload__picture">
<source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 1472px)" class="canon-amplience__image" />
<source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 1200px)" class="canon-amplience__image" />
<source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-tb$" type="image/webp" media="(min-width: 769px)" class="canon-amplience__image" />
<source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-mb$" type="image/webp" media="(min-width: 0)" class="canon-amplience__image" />
<img data-src="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt-jpg$" data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt-jpg$" alt="Canon Camera" class="canon-amplience__image lazy" />
</picture>
</div>
</div>
<div class="bs-col-12 bs-col-md order-2 order-md-1">
<div class="tile-gallery__sidebar d-flex flex-column justify-content-between h-100 flex-md-column-reverse mx-2 mx-md-0">
<div class="d-flex justify-content-end bg-white py-3 px-4">
<div class="d-flex flex-column">
<p class="fs-sm mb-2">Taken with <strong>EOS 5D Mark II</strong> and <strong>EF</strong></p>
<div class="bs-row bs-gx-3">
<div class="bs-col-auto">
<span class="ms-0 me-1">
<i class="canon-icon icon-aperture-t"> </i>
</span>
<span> 1.4 </span>
</div>
<div class="bs-col-auto">
<span class="ms-0 me-1">
<i class="canon-icon icon-icon-time"> </i>
</span>
<span> 1/40 </span>
</div>
<div class="bs-col-auto">
<span class="ms-0 me-1"> <i class="canon-icon icon-icon-iso-t"></i> </span>
<span> 32000</span>
</div>
</div>
</div>
</div>
<div class="py-4 py-md-9 px-md-4">
<h3 class="canon-paragraph--heading mb-4">Excellent low-light performance</h3>
<p class="fs-base">Taken with the EOS R6 1/30 f/1.4 ISO 32000</p>
</div>
</div>
</div>
<div class="bs-col-12 bs-col-md-auto order-0 order-md-2">
<div class="d-flex justify-content-between align-items-center flex-md-column h-100 pb-md-6 tile-gallery__controls py-3 px-2 px-md-0 bg-white">
<div class="order-1 order-md-0 mb-md-4"><button type="button" class="" data-modal-close aria-label="Close">
<span aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34">
<g fill="none">
<path d="M17 33.5a16.39 16.39 0 01-11.667-4.833A16.392 16.392 0 01.5 17 16.39 16.39 0 015.333 5.333 16.392 16.392 0 0117 .5a16.39 16.39 0 0111.667 4.833A16.392 16.392 0 0133.5 17a16.39 16.39 0 01-4.833 11.667A16.392 16.392 0 0117 33.5z" />
<path d="M17 1A15.895 15.895 0 005.686 5.686 15.895 15.895 0 001 17c0 4.274 1.664 8.292 4.686 11.314A15.895 15.895 0 0017 33c4.274 0 8.292-1.664 11.314-4.686A15.895 15.895 0 0033 17c0-4.274-1.664-8.292-4.686-11.314A15.895 15.895 0 0017 1m0-1c9.389 0 17 7.611 17 17s-7.611 17-17 17S0 26.389 0 17 7.611 0 17 0z" fill="#323232" />
<path stroke="currentColor" d="M10 24l14-14" />
<path stroke="#323232" d="M10 10l14 14" />
</g>
</svg>
</span>
</button>
</div>
<div class="d-flex flex-column align-items-center order-0 order-md-1">
<a href="#" class="d-flex bg-dark text-white border border-dark rounded-circle p-2 mb-md-2" download target="_blank">
<svg width="15" height="13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.358 0v9.714M4.128 6.74l3.225 2.979 3.224-2.979M0 12.143h14.571" stroke="currentColor" />
</svg>
</a>
<span class="fs-sm d-none d-md-block"> 8.9 MB</span>
</div>
<button class="mt-md-auto d-none d-md-block order-md-2">
<svg width="21" height="21" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(1 1)" fill="none" fill-rule="evenodd">
<path d="M10.693 4c.832 0 1.077.483 1.077 1.034 0 .69-.55 1.326-1.492 1.326-.788 0-1.163-.396-1.14-1.05 0-.55.462-1.31 1.555-1.31zm-2.13 10.563c-.568 0-.985-.345-.587-1.86l.65-2.69c.114-.43.133-.603 0-.603-.17 0-.906.298-1.342.59L7 9.537c1.382-1.154 2.97-1.83 3.652-1.83.568 0 .663.67.38 1.704l-.747 2.827c-.132.5-.076.672.056.672.172 0 .73-.21 1.28-.64l.32.43c-1.343 1.345-2.81 1.863-3.378 1.863z" fill="currentColor" />
<circle stroke="currentColor" stroke-width="2" cx="9.5" cy="9.5" r="9.5" />
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>