<div class="gallery-modal gallery-modal--durp" data-modal-is-open="false" data-gallery-modal>
<div class="gallery-modal__slide-container" style="transform: translateX(0vw);" data-modal-item data-carousel-index="0">
<button class="gallery-modal__slide-button" aria-label="Close modal" tabindex="0" data-modal-slide-button="0">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z" fill="black" fill-opacity="0.25"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25 17V23H31L31.1166 22.9933C31.614 22.9355 32 22.5128 32 22L31.9933 21.8834C31.9355 21.386 31.5128 21 31 21H28.416L32 17.5L30.5 16L27 19.586V17L26.9933 16.8834C26.9355 16.386 26.5128 16 26 16C25.4477 16 25 16.4477 25 17ZM16 30.5L17.5 32L21 28.416V31L21.0067 31.1166C21.0645 31.614 21.4872 32 22 32C22.5523 32 23 31.5523 23 31V25H17L16.8834 25.0067C16.386 25.0645 16 25.4872 16 26L16.0067 26.1166C16.0645 26.614 16.4872 27 17 27H19.586L16 30.5Z" fill="white"/>
</svg>
</button>
<div class="gallery-modal__slide">
<div class="gallery-modal__media-container">
<div class="gallery-modal__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/1348/960?random=1 1600w, https://picsum.photos/1348/960?random=1 1200w, https://picsum.photos/1348/960?random=1 800w, https://picsum.photos/1348/960?random=1 400w " sizes="100vw" type="image/webp">
<source srcset="https://picsum.photos/1348/960?random=1 1600w, https://picsum.photos/1348/960?random=1 1200w, https://picsum.photos/1348/960?random=1 800w, https://picsum.photos/1348/960?random=1 400w " sizes="100vw" type="image/jpeg">
<img class="captioned-image__image" loading="lazy" src="https://picsum.photos/1348/960?random=1" alt="alt text 1">
</picture>
<figcaption class="captioned-image__caption captioned-image__caption--">
Image caption changes as the user swipes through.
</figcaption>
</figure>
</div>
</div>
<div class="gallery-modal__caption
gallery-modal__caption--dark" data-modal-caption>
Image caption changes as the user swipes through.
</div>
</div>
<div class="gallery-modal__controls-container">
<div class="gallery-modal__controls">
<button tabindex="0" class="gallery-modal__control-button-previous" type="button" aria-label="Go to previous carousel item, item 5 of 5" data-modal-controls-prev>
<svg class="left-chevron" xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark left-chevron__shape" fill="#E84A27" fill-rule="nonzero" d="M7.768 1.65c.346-.419.3-1.05-.104-1.41a.937.937 0 0 0-1.356.11L0 8l6.308 7.65a.937.937 0 0 0 1.356.11c.403-.36.45-.991.104-1.41L2.534 8l5.234-6.35z"/>
</svg>
</button>
<button tabindex="0" class="gallery-modal__control-button-next" type="button" aria-label="Go to next carousel item, item 2 of 5" data-modal-controls-next>
<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</button>
</div>
</div>
</div>
<div class="gallery-modal__slide-container" style="transform: translateX(100vw);" data-modal-item data-carousel-index="1">
<button class="gallery-modal__slide-button" aria-label="Close modal" tabindex="0" data-modal-slide-button="1">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z" fill="black" fill-opacity="0.25"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25 17V23H31L31.1166 22.9933C31.614 22.9355 32 22.5128 32 22L31.9933 21.8834C31.9355 21.386 31.5128 21 31 21H28.416L32 17.5L30.5 16L27 19.586V17L26.9933 16.8834C26.9355 16.386 26.5128 16 26 16C25.4477 16 25 16.4477 25 17ZM16 30.5L17.5 32L21 28.416V31L21.0067 31.1166C21.0645 31.614 21.4872 32 22 32C22.5523 32 23 31.5523 23 31V25H17L16.8834 25.0067C16.386 25.0645 16 25.4872 16 26L16.0067 26.1166C16.0645 26.614 16.4872 27 17 27H19.586L16 30.5Z" fill="white"/>
</svg>
</button>
<div class="gallery-modal__slide">
<div class="gallery-modal__media-container">
<div class="gallery-modal__video-container">
<div class="gallery-modal__video">
<img class="gallery-modal__video-splash-image" src="https://i.ytimg.com/vi/jVIwpjHazmg/hqdefault.jpg" alt="Caption of the video" data-modal-splash-image>
<iframe class="gallery-modal__video-iframe" src="" title="" data-modal-video-src="https://www.youtube.com/embed/jVIwpjHazmg?feature=oembed&autoplay=1" style="display: none;" allow="autoplay"></iframe>
<img class="gallery-modal__video-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA1YAAAHgCAIAAAApMmt9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAEv0lEQVR4nO3BMQEAAADCoPVPbQo/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC+BsauAAH5v2KcAAAAAElFTkSuQmCC"
alt="Caption of the video">
<button class="gallery-modal__video-play" data-modal-video-play aria-label="play video">
<span class="play-button">
<svg class="play-button__oval" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="68" height="68" viewBox="0 0 68 68">
<defs>
<circle id="prefix__a" cx="32" cy="32" r="32"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(2 2)">
<use fill="#000" fill-opacity=".5" xlink:href="#prefix__a"/>
<circle cx="32" cy="32" r="33" stroke="#000" stroke-opacity=".5" stroke-width="2"/>
<circle cx="32" cy="32" r="31" stroke="#FF552E" stroke-linejoin="miter" stroke-width="2"/>
</g>
</svg>
<svg class="play-button__arrow" xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24">
<path fill="#F5F5F5" fill-rule="evenodd" d="M24 44L24 20 44 32z" transform="translate(-24 -20)"/>
</svg>
</span>
</button>
</div>
</div>
</div>
<div class="gallery-modal__caption
gallery-modal__caption--dark" data-modal-caption>
Caption of the video
</div>
</div>
<div class="gallery-modal__controls-container">
<div class="gallery-modal__controls">
<button tabindex="0" class="gallery-modal__control-button-previous" type="button" aria-label="Go to previous carousel item, item 1 of 5" data-modal-controls-prev>
<svg class="left-chevron" xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark left-chevron__shape" fill="#E84A27" fill-rule="nonzero" d="M7.768 1.65c.346-.419.3-1.05-.104-1.41a.937.937 0 0 0-1.356.11L0 8l6.308 7.65a.937.937 0 0 0 1.356.11c.403-.36.45-.991.104-1.41L2.534 8l5.234-6.35z"/>
</svg>
</button>
<button tabindex="0" class="gallery-modal__control-button-next" type="button" aria-label="Go to next carousel item, item 3 of 5" data-modal-controls-next>
<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</button>
</div>
</div>
</div>
<div class="gallery-modal__slide-container" style="transform: translateX(100vw);" data-modal-item data-carousel-index="2">
<button class="gallery-modal__slide-button" aria-label="Close modal" tabindex="0" data-modal-slide-button="2">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z" fill="black" fill-opacity="0.25"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25 17V23H31L31.1166 22.9933C31.614 22.9355 32 22.5128 32 22L31.9933 21.8834C31.9355 21.386 31.5128 21 31 21H28.416L32 17.5L30.5 16L27 19.586V17L26.9933 16.8834C26.9355 16.386 26.5128 16 26 16C25.4477 16 25 16.4477 25 17ZM16 30.5L17.5 32L21 28.416V31L21.0067 31.1166C21.0645 31.614 21.4872 32 22 32C22.5523 32 23 31.5523 23 31V25H17L16.8834 25.0067C16.386 25.0645 16 25.4872 16 26L16.0067 26.1166C16.0645 26.614 16.4872 27 17 27H19.586L16 30.5Z" fill="white"/>
</svg>
</button>
<div class="gallery-modal__slide">
<div class="gallery-modal__media-container">
<div class="gallery-modal__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/1348/960?random=2 1600w, https://picsum.photos/1348/960?random=2 1200w, https://picsum.photos/1348/960?random=2 800w, https://picsum.photos/1348/960?random=2 400w " sizes="100vw" type="image/webp">
<source srcset="https://picsum.photos/1348/960?random=2 1600w, https://picsum.photos/1348/960?random=2 1200w, https://picsum.photos/1348/960?random=2 800w, https://picsum.photos/1348/960?random=2 400w " sizes="100vw" type="image/jpeg">
<img class="captioned-image__image" loading="lazy" src="https://picsum.photos/1348/960?random=2" alt="alt text 2">
</picture>
<figcaption class="captioned-image__caption captioned-image__caption--">
This one has a caption, too.
</figcaption>
</figure>
</div>
</div>
<div class="gallery-modal__caption
gallery-modal__caption--dark" data-modal-caption>
This one has a caption, too.
</div>
</div>
<div class="gallery-modal__controls-container">
<div class="gallery-modal__controls">
<button tabindex="0" class="gallery-modal__control-button-previous" type="button" aria-label="Go to previous carousel item, item 2 of 5" data-modal-controls-prev>
<svg class="left-chevron" xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark left-chevron__shape" fill="#E84A27" fill-rule="nonzero" d="M7.768 1.65c.346-.419.3-1.05-.104-1.41a.937.937 0 0 0-1.356.11L0 8l6.308 7.65a.937.937 0 0 0 1.356.11c.403-.36.45-.991.104-1.41L2.534 8l5.234-6.35z"/>
</svg>
</button>
<button tabindex="0" class="gallery-modal__control-button-next" type="button" aria-label="Go to next carousel item, item 4 of 5" data-modal-controls-next>
<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</button>
</div>
</div>
</div>
<div class="gallery-modal__slide-container" style="transform: translateX(100vw);" data-modal-item data-carousel-index="3">
<button class="gallery-modal__slide-button" aria-label="Close modal" tabindex="0" data-modal-slide-button="3">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z" fill="black" fill-opacity="0.25"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25 17V23H31L31.1166 22.9933C31.614 22.9355 32 22.5128 32 22L31.9933 21.8834C31.9355 21.386 31.5128 21 31 21H28.416L32 17.5L30.5 16L27 19.586V17L26.9933 16.8834C26.9355 16.386 26.5128 16 26 16C25.4477 16 25 16.4477 25 17ZM16 30.5L17.5 32L21 28.416V31L21.0067 31.1166C21.0645 31.614 21.4872 32 22 32C22.5523 32 23 31.5523 23 31V25H17L16.8834 25.0067C16.386 25.0645 16 25.4872 16 26L16.0067 26.1166C16.0645 26.614 16.4872 27 17 27H19.586L16 30.5Z" fill="white"/>
</svg>
</button>
<div class="gallery-modal__slide">
<div class="gallery-modal__media-container">
<div class="gallery-modal__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/900/1100?random=3 1600w, https://picsum.photos/900/1100?random=3 1200w, https://picsum.photos/900/1100?random=3 800w, https://picsum.photos/900/1100?random=3 400w " sizes="100vw" type="image/webp">
<source srcset="https://picsum.photos/900/1100?random=3 1600w, https://picsum.photos/900/1100?random=3 1200w, https://picsum.photos/900/1100?random=3 800w, https://picsum.photos/900/1100?random=3 400w " sizes="100vw" type="image/jpeg">
<img class="captioned-image__image" loading="lazy" src="https://picsum.photos/900/1100?random=3" alt="alt text 2">
</picture>
<figcaption class="captioned-image__caption captioned-image__caption--">
This one has a caption, too.
</figcaption>
</figure>
</div>
</div>
<div class="gallery-modal__caption
gallery-modal__caption--dark" data-modal-caption>
This one has a caption, too.
</div>
</div>
<div class="gallery-modal__controls-container">
<div class="gallery-modal__controls">
<button tabindex="0" class="gallery-modal__control-button-previous" type="button" aria-label="Go to previous carousel item, item 3 of 5" data-modal-controls-prev>
<svg class="left-chevron" xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark left-chevron__shape" fill="#E84A27" fill-rule="nonzero" d="M7.768 1.65c.346-.419.3-1.05-.104-1.41a.937.937 0 0 0-1.356.11L0 8l6.308 7.65a.937.937 0 0 0 1.356.11c.403-.36.45-.991.104-1.41L2.534 8l5.234-6.35z"/>
</svg>
</button>
<button tabindex="0" class="gallery-modal__control-button-next" type="button" aria-label="Go to next carousel item, item 5 of 5" data-modal-controls-next>
<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</button>
</div>
</div>
</div>
<div class="gallery-modal__slide-container" style="transform: translateX(-100vw);" data-modal-item data-carousel-index="4">
<button class="gallery-modal__slide-button" aria-label="Close modal" tabindex="0" data-modal-slide-button="4">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z" fill="black" fill-opacity="0.25"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25 17V23H31L31.1166 22.9933C31.614 22.9355 32 22.5128 32 22L31.9933 21.8834C31.9355 21.386 31.5128 21 31 21H28.416L32 17.5L30.5 16L27 19.586V17L26.9933 16.8834C26.9355 16.386 26.5128 16 26 16C25.4477 16 25 16.4477 25 17ZM16 30.5L17.5 32L21 28.416V31L21.0067 31.1166C21.0645 31.614 21.4872 32 22 32C22.5523 32 23 31.5523 23 31V25H17L16.8834 25.0067C16.386 25.0645 16 25.4872 16 26L16.0067 26.1166C16.0645 26.614 16.4872 27 17 27H19.586L16 30.5Z" fill="white"/>
</svg>
</button>
<div class="gallery-modal__slide">
<div class="gallery-modal__media-container">
<div class="gallery-modal__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/1348/960?random=4 1600w, https://picsum.photos/1348/960?random=4 1200w, https://picsum.photos/1348/960?random=4 800w, https://picsum.photos/1348/960?random=4 400w " sizes="100vw" type="image/webp">
<source srcset="https://picsum.photos/1348/960?random=4 1600w, https://picsum.photos/1348/960?random=4 1200w, https://picsum.photos/1348/960?random=4 800w, https://picsum.photos/1348/960?random=4 400w " sizes="100vw" type="image/jpeg">
<img class="captioned-image__image" loading="lazy" src="https://picsum.photos/1348/960?random=4" alt="alt text 2">
</picture>
<figcaption class="captioned-image__caption captioned-image__caption--">
This one has a caption, too.
</figcaption>
</figure>
</div>
</div>
<div class="gallery-modal__caption
gallery-modal__caption--dark" data-modal-caption>
This one has a caption, too.
</div>
</div>
<div class="gallery-modal__controls-container">
<div class="gallery-modal__controls">
<button tabindex="0" class="gallery-modal__control-button-previous" type="button" aria-label="Go to previous carousel item, item 4 of 5" data-modal-controls-prev>
<svg class="left-chevron" xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark left-chevron__shape" fill="#E84A27" fill-rule="nonzero" d="M7.768 1.65c.346-.419.3-1.05-.104-1.41a.937.937 0 0 0-1.356.11L0 8l6.308 7.65a.937.937 0 0 0 1.356.11c.403-.36.45-.991.104-1.41L2.534 8l5.234-6.35z"/>
</svg>
</button>
<button tabindex="0" class="gallery-modal__control-button-next" type="button" aria-label="Go to next carousel item, item 1 of 5" data-modal-controls-next>
<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="gallery-modal gallery-modal--{{ siteUnit }}" data-modal-is-open="false" data-gallery-modal>
{% set numberOfMediaItems = component.media | length %}
{% for item in component.media %}
<div class="gallery-modal__slide-container" style="transform: translateX({{ loop.last ? -100 : not loop.first ? 100 : 0 }}vw);" data-modal-item data-carousel-index="{{ loop.index0 }}">
<button class="gallery-modal__slide-button"
aria-label="Close modal"
tabindex="0"
data-modal-slide-button="{{ loop.index0 }}">
{% include 'bits/icons/shrink.twig' %}
</button>
<div class="gallery-modal__slide">
<div
class="gallery-modal__media-container">
{% if item.media_type == 'Image' %}
<div class="gallery-modal__image-container">
{{ imageMacros.createAlwaysFullWidthNoCrop(item.media) }}
</div>
{% else %}
<div class="gallery-modal__video-container">
<div class="gallery-modal__video">
<img class="gallery-modal__video-splash-image" src="{{ item.media.thumbnail_url }}" alt="{{ item.media.caption | escape }}" data-modal-splash-image>
<iframe class="gallery-modal__video-iframe" src="" title="{{ item.media.iframeTitle }}" data-modal-video-src="{{ item.media.src }}" style="display: none;" allow="autoplay"></iframe>
<img class="gallery-modal__video-placeholder" src="{{ item.media.dimensionSizingImage }}" alt="{{ item.media.caption | escape }}">
<button class="gallery-modal__video-play" data-modal-video-play aria-label="play video">
{% include 'bits/icons/play-button/play-button.twig' %}
</button>
</div>
</div>
{% endif %}
</div>
<div class="gallery-modal__caption
gallery-modal__caption--{{ background }}"
data-modal-caption>
{{ item.media.caption | raw }}
</div>
</div>
<div class="gallery-modal__controls-container">
<div class="gallery-modal__controls">
{% if (loop.index - 1) <= 0 %}
{% set previousItemNumber = numberOfMediaItems %}
{% else %}
{% set previousItemNumber = loop.index - 1 %}
{% endif %}
{% if (loop.index + 1) > numberOfMediaItems %}
{% set nextItemNumber = 1 %}
{% else %}
{% set nextItemNumber = loop.index + 1 %}
{% endif %}
<button
tabindex="0"
class="gallery-modal__control-button-previous" type="button" aria-label="Go to previous carousel item, item {{ previousItemNumber }} of {{ numberOfMediaItems }}" data-modal-controls-prev>
{% include "bits/icons/left-chevron.twig" %}
</button>
<button
tabindex="0"
class="gallery-modal__control-button-next" type="button" aria-label="Go to next carousel item, item {{ nextItemNumber }} of {{ numberOfMediaItems }}" data-modal-controls-next>
{% include "bits/icons/right-chevron.twig" %}
</button>
</div>
</div>
</div>
{% endfor %}
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"component": {
"type": "gallery",
"displayType": "slideshow",
"title": "A header passed in as a string",
"shortDescription": "this is a short description",
"body": "<p>Studying urban planning at UIUC means you have access to the resources, facilities, and minds of a global R1 university. It also makes you part of a long tradition—planning has been offered at Illinois since 1912.</p><p>Getting involved in planning issues at all levels is easy in Champaign-Urbana. Work with three plan commissions, two city councils, a county board, the Bicycle and Pedestrian Advisory Board, the Sustainability Advisory Commission, the Community Development Commission, and more!</p>",
"media": [
{
"media_type": "Image",
"media": {
"src": "https://picsum.photos/1348/960?random=1",
"altText": "alt text 1",
"caption": "Image caption changes as the user swipes through."
}
},
{
"media_type": "Video",
"media": {
"url": "https://www.youtube.com/watch?v=jVIwpjHazmg",
"src": "https://www.youtube.com/embed/jVIwpjHazmg?feature=oembed&autoplay=1",
"caption": "Caption of the video",
"thumbnail_url": "https://i.ytimg.com/vi/jVIwpjHazmg/hqdefault.jpg",
"dimensionSizingImage": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA1YAAAHgCAIAAAApMmt9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAEv0lEQVR4nO3BMQEAAADCoPVPbQo/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC+BsauAAH5v2KcAAAAAElFTkSuQmCC",
"width": 854,
"height": 480
}
},
{
"media_type": "Image",
"media": {
"src": "https://picsum.photos/1348/960?random=2",
"altText": "alt text 2",
"caption": "This one has a caption, too."
}
},
{
"media_type": "Image",
"media": {
"src": "https://picsum.photos/900/1100?random=3",
"altText": "alt text 2",
"caption": "This one has a caption, too."
}
},
{
"media_type": "Image",
"media": {
"src": "https://picsum.photos/1348/960?random=4",
"altText": "alt text 2",
"caption": "This one has a caption, too."
}
}
],
"mediaSize": "Large",
"callToAction": {
"text": "Click this button",
"url": "#"
}
}
}
.gallery-modal
align-items center
background-color rgba(54, 61, 68, 0.75)
display flex
height 100vh
justify-content center
left 0
overflow hidden
position fixed
top 0
width 100%
transition all 200ms ease-in-out
z-index 3
&[data-modal-is-open="false"]
visibility hidden
opacity 0
&[data-modal-is-open="true"]
visibility visible
opacity 1
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive white
--iconBackgroundColorActive illiniOrange
&--dark
--bodyColor grey
--captionColor grey
&--arch
--borderColor industrialBlue
--captionColor greyDarkest
--iconFillColor industrialBlue
--iconFillColorActive white
--iconBackgroundColorActive industrialBlue
&--art
--borderColor archesBlue
--captionColor greyDarkest
--iconFillColor archesBlue
--iconFillColorActive white
--iconBackgroundColorActive archesBlue
&--college
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive illiniBlue
--iconBackgroundColorActive illiniOrange
&--dance
--borderColor archesBlue
--captionColor greyDarkest
--iconFillColor archesBlue
--iconFillColorActive white
--iconBackgroundColorActive archesBlue
&--durp
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive white
--iconBackgroundColorActive illiniOrange
&--landarch
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive black
--iconBackgroundColorActive illiniOrange
&--theatre
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive illiniBlue
--iconBackgroundColorActive illiniOrange
&--music
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive illiniBlue
--iconBackgroundColorActive illiniOrange
&__video-play
@extends $video-play
&__caption
@extends $detail
border-top 2px solid var(--borderColor)
color var(--captionColor)
margin-top 24px
padding-top 8px
&__caption
min-height 35px
&__container
position relative
&__slide-container
transition all 200ms ease-in-out
position fixed
background cloud
padding-bottom 38px
width fit-content
z-index 2
&:not(:first-child)
opacity 0
&__media-container
& .captioned-image__caption
display none
& .captioned-image__image
& .captioned-image__gallery-image
& iframe
max-height 70vh
height auto
max-width 85vw
width auto
+below(1000px)
max-width 100vw
& iframe
height 100%
width 100%
max-height 100%
position absolute
top 0
left 0
+below(mediumDeviceBreakpoint)
height 30vh
width 100vw
&__image-container
&__video-container
&__video
height 100%
&__video-splash-image
height 100%
object-fit cover
object-position center
width 100%
position absolute
top 0
left 0
&__video
position relative
+below(1000px)
max-width: 100vw;
&__slide-button
background-color rgba(0, 0, 0, 0.25)
border-radius 50%
cursor pointer
height 48px
position absolute
right 16px
top 16px
width 48px
z-index 1
+below(mediumDeviceBreakpoint)
height 40px
width 40px
right 8px
top 8px
& svg
pointer-events none
+below(mediumDeviceBreakpoint)
height 12px
width 12px
&__caption
margin 24px 160px 0 24px
+below(1000px)
margin 24px 24px 0 24px
padding-bottom 8px
&__controls-container
position absolute
right 24px
bottom 24px
margin-left 0
+below(800px)
bottom 32px
+below(1000px)
position relative
margin-left 24px
bottom 0
right 0
&__control-button-previous
&__control-button-next
@extends $control-button
border solid 2px var(--borderColor)
&:focus
&:hover
background-color var(--iconBackgroundColorActive)
& ._mark
fill var(--iconFillColorActive)
& > svg
& ._mark
fill var(--iconFillColor)
&__control-button-previous
margin-right 12px
&__controls
display flex
pointer-events all
+below(768px)
margin-left auto
margin-right auto
margin-bottom -20px
width fit-content
There are no notes for this item.