<div class="gallery-component gallery-component--light gallery-component--large
gallery-component--music" data-gallery>
<div class="gallery-component__gallery-container">
<div class="gallery-filmstrip gallery-filmstrip--music" tabindex="-1" data-gallery-filmstrip data-filmstrip-modal>
<div class="gallery-filmstrip__slide-container gallery-filmstrip__slide-container--Large" data-carousel-index="0">
<button class="gallery-filmstrip__slide-button" data-slide-button="0" data-is-button-shown="true" aria-label="expand/collapse media">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#FFF" d="M6.5 8L8 9.5 3.414 14H7c.513 0 .936.386.993.883L8 15c0 .513-.386.936-.883.993L7 16H0V9c0-.552.448-1 1-1 .513 0 .936.386.993.883L2 9v3.584L6.5 8zM16 0v7c0 .552-.448 1-1 1-.513 0-.936-.386-.993-.883L14 7V3.414L9.5 8 8 6.5 12.584 2H9c-.513 0-.936-.386-.993-.883L8 1c0-.513.386-.936.883-.993L9 0h7z"/>
</svg>
</button>
<div class="gallery-filmstrip__slide" data-gallery-filmstrip-item>
<div class="gallery-filmstrip__media-container gallery-filmstrip__media-container--Large">
<div class="gallery-filmstrip__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/1348/960?random=1" type="image/webp">
<img class="captioned-image__gallery-image" loading="lazy" src="https://picsum.photos/1348/960?random=1" alt="alt text 1">
</picture>
<figcaption class="captioned-image__caption">
Image caption changes as the user swipes through.
</figcaption>
</figure>
</div>
</div>
<div class="gallery-filmstrip__caption
gallery-filmstrip__caption--light" data-caption data-is-caption-shown="true">
Image caption changes as the user swipes through.
</div>
</div>
</div>
<div class="gallery-filmstrip__slide-container gallery-filmstrip__slide-container--Large" data-carousel-index="1">
<button class="gallery-filmstrip__slide-button" data-slide-button="1" data-is-button-shown="false" aria-label="expand/collapse media">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#FFF" d="M6.5 8L8 9.5 3.414 14H7c.513 0 .936.386.993.883L8 15c0 .513-.386.936-.883.993L7 16H0V9c0-.552.448-1 1-1 .513 0 .936.386.993.883L2 9v3.584L6.5 8zM16 0v7c0 .552-.448 1-1 1-.513 0-.936-.386-.993-.883L14 7V3.414L9.5 8 8 6.5 12.584 2H9c-.513 0-.936-.386-.993-.883L8 1c0-.513.386-.936.883-.993L9 0h7z"/>
</svg>
</button>
<div class="gallery-filmstrip__slide" data-gallery-filmstrip-item>
<div class="gallery-filmstrip__media-container gallery-filmstrip__media-container--Large">
<div class="gallery-filmstrip__video-container">
<div class="gallery-filmstrip__video">
<img class="gallery-filmstrip__video-splash-image" src="https://i.ytimg.com/vi/jVIwpjHazmg/hqdefault.jpg" alt="Caption of the video" data-splash-image>
<iframe class="gallery-filmstrip__video-iframe" src="" title="Caption of the video" data-video-src="https://www.youtube.com/embed/jVIwpjHazmg?feature=oembed&autoplay=1" frameborder="0" style="display: none;" allow="autoplay"></iframe>
<img class="gallery-filmstrip__video-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA1YAAAHgCAIAAAApMmt9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAEv0lEQVR4nO3BMQEAAADCoPVPbQo/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC+BsauAAH5v2KcAAAAAElFTkSuQmCC"
alt="Caption of the video">
<button class="gallery-filmstrip__video-play" data-video-play data-is-play-button-shown="false" 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-filmstrip__caption
gallery-filmstrip__caption--light" data-caption data-is-caption-shown="false">
Caption of the video
</div>
</div>
</div>
<div class="gallery-filmstrip__slide-container gallery-filmstrip__slide-container--Large" data-carousel-index="2">
<button class="gallery-filmstrip__slide-button" data-slide-button="2" data-is-button-shown="false" aria-label="expand/collapse media">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#FFF" d="M6.5 8L8 9.5 3.414 14H7c.513 0 .936.386.993.883L8 15c0 .513-.386.936-.883.993L7 16H0V9c0-.552.448-1 1-1 .513 0 .936.386.993.883L2 9v3.584L6.5 8zM16 0v7c0 .552-.448 1-1 1-.513 0-.936-.386-.993-.883L14 7V3.414L9.5 8 8 6.5 12.584 2H9c-.513 0-.936-.386-.993-.883L8 1c0-.513.386-.936.883-.993L9 0h7z"/>
</svg>
</button>
<div class="gallery-filmstrip__slide" data-gallery-filmstrip-item>
<div class="gallery-filmstrip__media-container gallery-filmstrip__media-container--Large">
<div class="gallery-filmstrip__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/1348/960?random=2" type="image/webp">
<img class="captioned-image__gallery-image" loading="lazy" src="https://picsum.photos/1348/960?random=2" alt="alt text 2">
</picture>
<figcaption class="captioned-image__caption">
This one has a caption, too.
</figcaption>
</figure>
</div>
</div>
<div class="gallery-filmstrip__caption
gallery-filmstrip__caption--light" data-caption data-is-caption-shown="false">
This one has a caption, too.
</div>
</div>
</div>
<div class="gallery-filmstrip__slide-container gallery-filmstrip__slide-container--Large" data-carousel-index="3">
<button class="gallery-filmstrip__slide-button" data-slide-button="3" data-is-button-shown="false" aria-label="expand/collapse media">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#FFF" d="M6.5 8L8 9.5 3.414 14H7c.513 0 .936.386.993.883L8 15c0 .513-.386.936-.883.993L7 16H0V9c0-.552.448-1 1-1 .513 0 .936.386.993.883L2 9v3.584L6.5 8zM16 0v7c0 .552-.448 1-1 1-.513 0-.936-.386-.993-.883L14 7V3.414L9.5 8 8 6.5 12.584 2H9c-.513 0-.936-.386-.993-.883L8 1c0-.513.386-.936.883-.993L9 0h7z"/>
</svg>
</button>
<div class="gallery-filmstrip__slide" data-gallery-filmstrip-item>
<div class="gallery-filmstrip__media-container gallery-filmstrip__media-container--Large">
<div class="gallery-filmstrip__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/900/1100?random=3" type="image/webp">
<img class="captioned-image__gallery-image" loading="lazy" src="https://picsum.photos/900/1100?random=3" alt="alt text 2">
</picture>
<figcaption class="captioned-image__caption">
This one has a caption, too.
</figcaption>
</figure>
</div>
</div>
<div class="gallery-filmstrip__caption
gallery-filmstrip__caption--light" data-caption data-is-caption-shown="false">
This one has a caption, too.
</div>
</div>
</div>
<div class="gallery-filmstrip__slide-container gallery-filmstrip__slide-container--Large" data-carousel-index="4">
<button class="gallery-filmstrip__slide-button" data-slide-button="4" data-is-button-shown="false" aria-label="expand/collapse media">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#FFF" d="M6.5 8L8 9.5 3.414 14H7c.513 0 .936.386.993.883L8 15c0 .513-.386.936-.883.993L7 16H0V9c0-.552.448-1 1-1 .513 0 .936.386.993.883L2 9v3.584L6.5 8zM16 0v7c0 .552-.448 1-1 1-.513 0-.936-.386-.993-.883L14 7V3.414L9.5 8 8 6.5 12.584 2H9c-.513 0-.936-.386-.993-.883L8 1c0-.513.386-.936.883-.993L9 0h7z"/>
</svg>
</button>
<div class="gallery-filmstrip__slide" data-gallery-filmstrip-item>
<div class="gallery-filmstrip__media-container gallery-filmstrip__media-container--Large">
<div class="gallery-filmstrip__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/1348/960?random=4" type="image/webp">
<img class="captioned-image__gallery-image" loading="lazy" src="https://picsum.photos/1348/960?random=4" alt="alt text 2">
</picture>
<figcaption class="captioned-image__caption">
This one has a caption, too.
</figcaption>
</figure>
</div>
</div>
<div class="gallery-filmstrip__caption
gallery-filmstrip__caption--light" data-caption data-is-caption-shown="false">
This one has a caption, too.
</div>
</div>
</div>
</div>
<div class="gallery-filmstrip__controls-container gallery-filmstrip--music
" data-filmstrip-controls>
<div class="gallery-filmstrip__controls">
<button class="gallery-filmstrip__control-button-previous" type="button" aria-label="Go to previous carousel item" data-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 class="gallery-filmstrip__control-button-next" type="button" aria-label="Go to next carousel item" data-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 class="gallery-modal gallery-modal--music" 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--light" 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--light" 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--light" 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--light" 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--light" 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>
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
{% if is_wordpress %}
{{ enqueue_script('gallery-component-carousel') }}
{% endif %}
<div class="gallery-component gallery-component--{{ background }} gallery-component--{{ componentSpacing }}
gallery-component--{{ siteUnit }}" data-gallery>
{% if component.media and component.media | length > 0 %}
{% if component.displayType != 'tiles' %}
<div class="gallery-component__gallery-container">
{% include 'partials/gallery-filmstrip/gallery-filmstrip.twig' %}
{% include 'partials/gallery-modal/gallery-modal.twig' %}
</div>
{% endif %}
{% endif %}
{% if component.title|default and (component.title|trim) %}
<h2 class="gallery-component__title {{ component.hideTitle ? 'gallery-component__title--is-hidden' : '' }}"
id="{{ component.title|sanitize }}">
{{ component.title }}
</h2>
{% endif %}
{% if component.shortDescription | default %}
<p class="gallery-component__shortDescription">
{{ component.shortDescription }}
</p>
{% endif %}
{% if component.body | default %}
<div class="gallery-component__body">
{{ component.body | raw }}
</div>
{% endif %}
{% if component.displayType == 'tiles' %}
<div class="gallery-component__gallery-container">
{% include 'partials/gallery-tiles/gallery-tiles.twig' %}
{% include 'partials/gallery-modal/gallery-modal.twig' %}
</div>
{% endif %}
{% if component.addCta and component.callToAction %}
<div class="gallery-component__button">
{% set buttonColor = background == 'light' ? 'charcoalLighter' : 'cloud' %}
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'primary',
icon: component.callToAction.type|default('internal') ~ '-link',
text: component.callToAction.text,
url: component.callToAction.url,
width: 'full',
}
} %}
</div>
{% endif %}
</div>
{
"siteUnit": "music",
"departmentName": "Music",
"background": "light",
"componentSpacing": "large",
"component": {
"type": "gallery",
"displayType": "slideshow",
"title": null,
"shortDescription": null,
"body": null,
"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": "#"
}
}
}
$breakpointSmall = 750px
.gallery-component
--bodyColor greyDarkest
--shortDescriptionColor greyDarkest
--titleColor charcoalLight
&--dark
--bodyColor grey
--shortDescriptionColor grey
--titleColor white
.gallery-component
&--large
@extends $componentWithMargin
&--medium
@extends $componentWithMarginMedium
&--small
@extends $componentWithMarginSmall
clear fix
&__title
@extends $tertiaryTitle
color var(--titleColor)
max-width calc(100% - 120px)
+below($breakpointSmall)
max-width: 100%
&--is-hidden
@extends $visually-hidden
&__shortDescription
color var(--shortDescriptionColor)
font-family proximaNova
font-size 16px
font-weight 400
margin 8px 0 16px
&__body
@extends $primaryParagraph
color var(--bodyColor)
margin-bottom 64px
&__button
margin-top 64px
There are no notes for this item.