<div class="work-content work-content--music">
<h2 class="work-content__heading" id="Lorem ipsum dolor sit amet, consectetuer adipiscing elit viverra">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit viverra
</h2>
<div class="work-content__description">
<h3>Donec odio quisque volutpat mattis eros nullam</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
<div class="work-content__image-grid" data-image-grid>
<div class="work-content__image-container" data-trigger-modal>
<button class="work-content__image">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source
srcset="https://picsum.photos/864/608?random=1 432w "
sizes="(max-width: 800px) 100vw, 50vw"
type="image/webp"
>
<source
srcset="https://picsum.photos/864/608?random=1 432w "
sizes="(max-width: 800px) 100vw, 50vw"
type="image/jpeg"
>
<img class="captioned-image__image" loading="lazy" src="https://picsum.photos/864/608?random=1" alt="image b">
</picture>
<figcaption class="captioned-image__caption captioned-image__caption--light">
Image caption
</figcaption>
</figure>
</button>
</div>
<div class="image-modal image-modal--music" data-image-modal data-modal-is-open="false">
<div class="image-modal__container">
<div class="image-modal__image">
<button aria-label="close modal" class="image-modal__close-button" data-modal-close-button>
<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>
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/864/608?random=1" type="image/webp">
<img class="captioned-image__gallery-image" loading="lazy" src="https://picsum.photos/864/608?random=1" alt="image b">
</picture>
</figure>
</div>
<div class="image-modal__caption">
Image caption
</div>
</div>
</div>
<div class="work-content__image-container" data-trigger-modal>
<button class="work-content__image">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source
srcset="https://picsum.photos/864/1088?random=1 432w "
sizes="(max-width: 800px) 100vw, 50vw"
type="image/webp"
>
<source
srcset="https://picsum.photos/864/1088?random=1 432w "
sizes="(max-width: 800px) 100vw, 50vw"
type="image/jpeg"
>
<img class="captioned-image__image" loading="lazy" src="https://picsum.photos/864/1088?random=1" alt="image c">
</picture>
<figcaption class="captioned-image__caption captioned-image__caption--light">
Image caption
</figcaption>
</figure>
</button>
</div>
<div class="image-modal image-modal--music" data-image-modal data-modal-is-open="false">
<div class="image-modal__container">
<div class="image-modal__image">
<button aria-label="close modal" class="image-modal__close-button" data-modal-close-button>
<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>
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/864/1088?random=1" type="image/webp">
<img class="captioned-image__gallery-image" loading="lazy" src="https://picsum.photos/864/1088?random=1" alt="image c">
</picture>
</figure>
</div>
<div class="image-modal__caption">
Image caption
</div>
</div>
</div>
<div class="work-content__image-container" data-trigger-modal>
<button class="work-content__image">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source
srcset="https://picsum.photos/864/608?random=1 432w "
sizes="(max-width: 800px) 100vw, 50vw"
type="image/webp"
>
<source
srcset="https://picsum.photos/864/608?random=1 432w "
sizes="(max-width: 800px) 100vw, 50vw"
type="image/jpeg"
>
<img class="captioned-image__image" loading="lazy" src="https://picsum.photos/864/608?random=1" alt="image d">
</picture>
<figcaption class="captioned-image__caption captioned-image__caption--light">
Image caption
</figcaption>
</figure>
</button>
</div>
<div class="image-modal image-modal--music" data-image-modal data-modal-is-open="false">
<div class="image-modal__container">
<div class="image-modal__image">
<button aria-label="close modal" class="image-modal__close-button" data-modal-close-button>
<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>
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/864/608?random=1" type="image/webp">
<img class="captioned-image__gallery-image" loading="lazy" src="https://picsum.photos/864/608?random=1" alt="image d">
</picture>
</figure>
</div>
<div class="image-modal__caption">
Image caption
</div>
</div>
</div>
<div class="work-content__image-container" data-trigger-modal>
<button class="work-content__image">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source
srcset="https://picsum.photos/864/608?random=1 432w "
sizes="(max-width: 800px) 100vw, 50vw"
type="image/webp"
>
<source
srcset="https://picsum.photos/864/608?random=1 432w "
sizes="(max-width: 800px) 100vw, 50vw"
type="image/jpeg"
>
<img class="captioned-image__image" loading="lazy" src="https://picsum.photos/864/608?random=1" alt="image e">
</picture>
<figcaption class="captioned-image__caption captioned-image__caption--light">
Image caption
</figcaption>
</figure>
</button>
</div>
<div class="image-modal image-modal--music" data-image-modal data-modal-is-open="false">
<div class="image-modal__container">
<div class="image-modal__image">
<button aria-label="close modal" class="image-modal__close-button" data-modal-close-button>
<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>
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/864/608?random=1" type="image/webp">
<img class="captioned-image__gallery-image" loading="lazy" src="https://picsum.photos/864/608?random=1" alt="image e">
</picture>
</figure>
</div>
<div class="image-modal__caption">
Image caption
</div>
</div>
</div>
<div class="work-content__image-container" data-trigger-modal>
<button class="work-content__image">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source
srcset="https://picsum.photos/864/608?random=1 432w "
sizes="(max-width: 800px) 100vw, 50vw"
type="image/webp"
>
<source
srcset="https://picsum.photos/864/608?random=1 432w "
sizes="(max-width: 800px) 100vw, 50vw"
type="image/jpeg"
>
<img class="captioned-image__image" loading="lazy" src="https://picsum.photos/864/608?random=1" alt="image f">
</picture>
<figcaption class="captioned-image__caption captioned-image__caption--light">
Image caption
</figcaption>
</figure>
</button>
</div>
<div class="image-modal image-modal--music" data-image-modal data-modal-is-open="false">
<div class="image-modal__container">
<div class="image-modal__image">
<button aria-label="close modal" class="image-modal__close-button" data-modal-close-button>
<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>
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/864/608?random=1" type="image/webp">
<img class="captioned-image__gallery-image" loading="lazy" src="https://picsum.photos/864/608?random=1" alt="image f">
</picture>
</figure>
</div>
<div class="image-modal__caption">
Image caption
</div>
</div>
</div>
<div class="work-content__image-container" data-trigger-modal>
<button class="work-content__image">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source
srcset="https://picsum.photos/864/832?random=1 432w "
sizes="(max-width: 800px) 100vw, 50vw"
type="image/webp"
>
<source
srcset="https://picsum.photos/864/832?random=1 432w "
sizes="(max-width: 800px) 100vw, 50vw"
type="image/jpeg"
>
<img class="captioned-image__image" loading="lazy" src="https://picsum.photos/864/832?random=1" alt="image g">
</picture>
<figcaption class="captioned-image__caption captioned-image__caption--light">
Image caption
</figcaption>
</figure>
</button>
</div>
<div class="image-modal image-modal--music" data-image-modal data-modal-is-open="false">
<div class="image-modal__container">
<div class="image-modal__image">
<button aria-label="close modal" class="image-modal__close-button" data-modal-close-button>
<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>
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/864/832?random=1" type="image/webp">
<img class="captioned-image__gallery-image" loading="lazy" src="https://picsum.photos/864/832?random=1" alt="image g">
</picture>
</figure>
</div>
<div class="image-modal__caption">
Image caption
</div>
</div>
</div>
<div class="work-content__image-container" data-trigger-modal>
<button class="work-content__image">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source
srcset="https://picsum.photos/864/1088?random=1 432w "
sizes="(max-width: 800px) 100vw, 50vw"
type="image/webp"
>
<source
srcset="https://picsum.photos/864/1088?random=1 432w "
sizes="(max-width: 800px) 100vw, 50vw"
type="image/jpeg"
>
<img class="captioned-image__image" loading="lazy" src="https://picsum.photos/864/1088?random=1" alt="image h">
</picture>
<figcaption class="captioned-image__caption captioned-image__caption--light">
Image caption
</figcaption>
</figure>
</button>
</div>
<div class="image-modal image-modal--music" data-image-modal data-modal-is-open="false">
<div class="image-modal__container">
<div class="image-modal__image">
<button aria-label="close modal" class="image-modal__close-button" data-modal-close-button>
<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>
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/864/1088?random=1" type="image/webp">
<img class="captioned-image__gallery-image" loading="lazy" src="https://picsum.photos/864/1088?random=1" alt="image h">
</picture>
</figure>
</div>
<div class="image-modal__caption">
Image caption
</div>
</div>
</div>
<div class="work-content__image-container" data-trigger-modal>
<button class="work-content__image">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source
srcset="https://picsum.photos/864/1088?random=1 432w "
sizes="(max-width: 800px) 100vw, 50vw"
type="image/webp"
>
<source
srcset="https://picsum.photos/864/1088?random=1 432w "
sizes="(max-width: 800px) 100vw, 50vw"
type="image/jpeg"
>
<img class="captioned-image__image" loading="lazy" src="https://picsum.photos/864/1088?random=1" alt="image i">
</picture>
<figcaption class="captioned-image__caption captioned-image__caption--light">
Image caption
</figcaption>
</figure>
</button>
</div>
<div class="image-modal image-modal--music" data-image-modal data-modal-is-open="false">
<div class="image-modal__container">
<div class="image-modal__image">
<button aria-label="close modal" class="image-modal__close-button" data-modal-close-button>
<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>
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/864/1088?random=1" type="image/webp">
<img class="captioned-image__gallery-image" loading="lazy" src="https://picsum.photos/864/1088?random=1" alt="image i">
</picture>
</figure>
</div>
<div class="image-modal__caption">
Image caption
</div>
</div>
</div>
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
{% if is_wordpress %}
{{ enqueue_script('image-modal') }}
{% endif %}
<div class="work-content work-content--{{ siteUnit }}">
<h2 class="work-content__heading" id="{{ post.heading|sanitize }}">
{{ post.heading }}
</h2>
<div class="work-content__description">
{{ post.description | raw }}
</div>
<div class="work-content__image-grid" data-image-grid>
{% for image in post.images %}
<div class="work-content__image-container" data-trigger-modal>
<button class="work-content__image">
{{ imageMacros.createWidthOnlyCrop(image, 432, background) }}
</button>
</div>
{% include 'partials/image-modal/image-modal.twig' with {image: image} %}
{% endfor %}
</div>
</div>
{
"siteUnit": "music",
"departmentName": "Music",
"background": "light",
"post": {
"heading": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit viverra",
"description": "<h3>Donec odio quisque volutpat mattis eros nullam</h3>\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n\nSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?\n </div>",
"images": [
{
"src": "https://picsum.photos/864/608?random=1",
"altText": "image b",
"caption": "Image caption"
},
{
"src": "https://picsum.photos/864/1088?random=1",
"altText": "image c",
"caption": "Image caption"
},
{
"src": "https://picsum.photos/864/608?random=1",
"altText": "image d",
"caption": "Image caption"
},
{
"src": "https://picsum.photos/864/608?random=1",
"altText": "image e",
"caption": "Image caption"
},
{
"src": "https://picsum.photos/864/608?random=1",
"altText": "image f",
"caption": "Image caption"
},
{
"src": "https://picsum.photos/864/832?random=1",
"altText": "image g",
"caption": "Image caption"
},
{
"src": "https://picsum.photos/864/1088?random=1",
"altText": "image h",
"caption": "Image caption"
},
{
"src": "https://picsum.photos/864/1088?random=1",
"altText": "image i",
"caption": "Image caption"
}
],
"programAreas": [
"Detail + fabrication",
"History + theory"
]
}
}
breakpoint = 800px
.work-content
@extends $richText
&__description
margin-bottom 64px
+above(breakpoint)
margin-bottom 80px
&__image-grid
display grid
grid-column-gap 16px
grid-row-gap 48px
grid-template-columns 1fr
+above(540px)
grid-template-columns repeat(2, 1fr)
&__image
width 100%
height auto
&__image-modal
background-color rgba(54, 61, 68, 0.75)
z-index 1
align-items center
justify-content center
left 0
display flex
top 0
transition all 200ms ease-in-out
width 100%
height 100vh
position fixed
&[data-modal-is-open="false"]
visibility hidden
opacity 0
&[data-modal-is-open="true"]
visibility visible
opacity 1
&__image-in-modal
max-width 80vw
img
width 100%
&__image-modal-container
position relative
There are no notes for this item.