<button class="js-gallery-trigger" data-gallery-target="art-carousel-styleguide">
Toggle gallery
</button>
<div class="c-gallery js-gallery " id="art-carousel-styleguide">
<div class="c-gallery__backdrop"></div>
<div class="c-gallery__container">
<button class="c-gallery__button c-gallery__button--close js-gallery-trigger" data-gallery-target="art-carousel-styleguide">
<div class="c-icon c-gallery__icon">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0006 9.32006L2.6805 0L0.000334479 2.68017L9.3204 12.0002L0 21.3206L2.68017 24.0008L12.0006 14.6804L21.3198 23.9997L24 21.3195L14.6807 12.0002L23.9997 2.68129L21.3195 0.00112372L12.0006 9.32006Z" />
</svg>
</div>
<span class="u-visually-hidden">close</span>
</button>
<div class="c-gallery__wrapper">
<div class="c-gallery__item" gallery-slide-id="">
<div class="c-gallery__visual-container" style="background-image: url(/assets/images/masonry/painting-01.jpg)">
<img class="c-gallery__visual u-visually-hidden u-idle" src="/assets/images/masonry/painting-01.jpg" />
</div>
<div class="c-gallery__content">
<div class="c-gallery__content-container l-container:10/12 l-container--default-spacing">
<div class="c-gallery__description-container">
<span class="c-gallery__title">Bezoek aan het depot</span>
<p class="c-gallery__description">De vrienden krijgen een exclusieve blik achter de
schermen. Samen bezochten ze het externe kunstdepot en
restauratieatelier van het museum</p>
</div>
<div class="c-gallery__actions">
<button class="c-gallery__button c-gallery__button--prev">
<div class="c-icon c-gallery__actions-icon c-gallery__actions-icon--prev">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
}
</style>
<path class="st0" d="M0,9.8v4h16.6l-5.8,5.8l2.8,2.8L24,12L13.6,1.6l-2.8,2.8l5.4,5.4H0z" />
</svg>
</div>
</button>
<h6 class="c-gallery__count">1 / 6</h6>
<button class="c-gallery__button c-gallery__button--next">
<div class="c-icon c-gallery__actions-icon c-gallery__actions-icon--next">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
}
</style>
<path class="st0" d="M0,9.8v4h16.6l-5.8,5.8l2.8,2.8L24,12L13.6,1.6l-2.8,2.8l5.4,5.4H0z" />
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="c-gallery__item" gallery-slide-id="">
<div class="c-gallery__visual-container" style="background-image: url(/assets/images/masonry/painting-02.jpg)">
<img class="c-gallery__visual u-visually-hidden u-idle" src="/assets/images/masonry/painting-02.jpg" />
</div>
<div class="c-gallery__content">
<div class="c-gallery__content-container l-container:10/12 l-container--default-spacing">
<div class="c-gallery__description-container">
<span class="c-gallery__title">Bezoek aan het depot</span>
<p class="c-gallery__description">De vrienden krijgen een exclusieve blik achter de
schermen. Samen bezochten ze het externe kunstdepot en
restauratieatelier van het museum</p>
</div>
<div class="c-gallery__actions">
<button class="c-gallery__button c-gallery__button--prev">
<div class="c-icon c-gallery__actions-icon c-gallery__actions-icon--prev">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
}
</style>
<path class="st0" d="M0,9.8v4h16.6l-5.8,5.8l2.8,2.8L24,12L13.6,1.6l-2.8,2.8l5.4,5.4H0z" />
</svg>
</div>
</button>
<h6 class="c-gallery__count">2 / 6</h6>
<button class="c-gallery__button c-gallery__button--next">
<div class="c-icon c-gallery__actions-icon c-gallery__actions-icon--next">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
}
</style>
<path class="st0" d="M0,9.8v4h16.6l-5.8,5.8l2.8,2.8L24,12L13.6,1.6l-2.8,2.8l5.4,5.4H0z" />
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="c-gallery__item" gallery-slide-id="">
<div class="c-gallery__visual-container" style="background-image: url(/assets/images/masonry/painting-03.jpg)">
<img class="c-gallery__visual u-visually-hidden u-idle" src="/assets/images/masonry/painting-03.jpg" />
</div>
<div class="c-gallery__content">
<div class="c-gallery__content-container l-container:10/12 l-container--default-spacing">
<div class="c-gallery__description-container">
<span class="c-gallery__title">Bezoek aan het depot</span>
<p class="c-gallery__description">De vrienden krijgen een exclusieve blik achter de
schermen. Samen bezochten ze het externe kunstdepot en
restauratieatelier van het museum</p>
</div>
<div class="c-gallery__actions">
<button class="c-gallery__button c-gallery__button--prev">
<div class="c-icon c-gallery__actions-icon c-gallery__actions-icon--prev">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
}
</style>
<path class="st0" d="M0,9.8v4h16.6l-5.8,5.8l2.8,2.8L24,12L13.6,1.6l-2.8,2.8l5.4,5.4H0z" />
</svg>
</div>
</button>
<h6 class="c-gallery__count">3 / 6</h6>
<button class="c-gallery__button c-gallery__button--next">
<div class="c-icon c-gallery__actions-icon c-gallery__actions-icon--next">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
}
</style>
<path class="st0" d="M0,9.8v4h16.6l-5.8,5.8l2.8,2.8L24,12L13.6,1.6l-2.8,2.8l5.4,5.4H0z" />
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="c-gallery__item" gallery-slide-id="">
<div class="c-gallery__visual-container" style="background-image: url(/assets/images/masonry/painting-04.jpg)">
<img class="c-gallery__visual u-visually-hidden u-idle" src="/assets/images/masonry/painting-04.jpg" />
</div>
<div class="c-gallery__content">
<div class="c-gallery__content-container l-container:10/12 l-container--default-spacing">
<div class="c-gallery__description-container">
<span class="c-gallery__title">Bezoek aan het depot</span>
<p class="c-gallery__description">De vrienden krijgen een exclusieve blik achter de
schermen. Samen bezochten ze het externe kunstdepot en
restauratieatelier van het museum</p>
</div>
<div class="c-gallery__actions">
<button class="c-gallery__button c-gallery__button--prev">
<div class="c-icon c-gallery__actions-icon c-gallery__actions-icon--prev">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
}
</style>
<path class="st0" d="M0,9.8v4h16.6l-5.8,5.8l2.8,2.8L24,12L13.6,1.6l-2.8,2.8l5.4,5.4H0z" />
</svg>
</div>
</button>
<h6 class="c-gallery__count">4 / 6</h6>
<button class="c-gallery__button c-gallery__button--next">
<div class="c-icon c-gallery__actions-icon c-gallery__actions-icon--next">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
}
</style>
<path class="st0" d="M0,9.8v4h16.6l-5.8,5.8l2.8,2.8L24,12L13.6,1.6l-2.8,2.8l5.4,5.4H0z" />
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="c-gallery__item" gallery-slide-id="">
<div class="c-gallery__visual-container" style="background-image: url(/assets/images/masonry/painting-05.jpg)">
<img class="c-gallery__visual u-visually-hidden u-idle" src="/assets/images/masonry/painting-05.jpg" />
</div>
<div class="c-gallery__content">
<div class="c-gallery__content-container l-container:10/12 l-container--default-spacing">
<div class="c-gallery__description-container">
<span class="c-gallery__title">Bezoek aan het depot</span>
<p class="c-gallery__description">De vrienden krijgen een exclusieve blik achter de
schermen. Samen bezochten ze het externe kunstdepot en
restauratieatelier van het museum</p>
</div>
<div class="c-gallery__actions">
<button class="c-gallery__button c-gallery__button--prev">
<div class="c-icon c-gallery__actions-icon c-gallery__actions-icon--prev">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
}
</style>
<path class="st0" d="M0,9.8v4h16.6l-5.8,5.8l2.8,2.8L24,12L13.6,1.6l-2.8,2.8l5.4,5.4H0z" />
</svg>
</div>
</button>
<h6 class="c-gallery__count">5 / 6</h6>
<button class="c-gallery__button c-gallery__button--next">
<div class="c-icon c-gallery__actions-icon c-gallery__actions-icon--next">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
}
</style>
<path class="st0" d="M0,9.8v4h16.6l-5.8,5.8l2.8,2.8L24,12L13.6,1.6l-2.8,2.8l5.4,5.4H0z" />
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="c-gallery__item" gallery-slide-id="">
<div class="c-gallery__visual-container" style="background-image: url(/assets/images/masonry/painting-06.jpg)">
<img class="c-gallery__visual u-visually-hidden u-idle" src="/assets/images/masonry/painting-06.jpg" />
</div>
<div class="c-gallery__content">
<div class="c-gallery__content-container l-container:10/12 l-container--default-spacing">
<div class="c-gallery__description-container">
<span class="c-gallery__title">Bezoek aan het depot</span>
<p class="c-gallery__description">De vrienden krijgen een exclusieve blik achter de
schermen. Samen bezochten ze het externe kunstdepot en
restauratieatelier van het museum</p>
</div>
<div class="c-gallery__actions">
<button class="c-gallery__button c-gallery__button--prev">
<div class="c-icon c-gallery__actions-icon c-gallery__actions-icon--prev">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
}
</style>
<path class="st0" d="M0,9.8v4h16.6l-5.8,5.8l2.8,2.8L24,12L13.6,1.6l-2.8,2.8l5.4,5.4H0z" />
</svg>
</div>
</button>
<h6 class="c-gallery__count">6 / 6</h6>
<button class="c-gallery__button c-gallery__button--next">
<div class="c-icon c-gallery__actions-icon c-gallery__actions-icon--next">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
}
</style>
<path class="st0" d="M0,9.8v4h16.6l-5.8,5.8l2.8,2.8L24,12L13.6,1.6l-2.8,2.8l5.4,5.4H0z" />
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
