<div class="gallery-tiles" data-gallery-tiles>
<div class="gallery-tiles__container">
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="gallery-tiles" data-gallery-tiles>
<div class="gallery-tiles__container">
{% for item in component.media %}
<div class="gallery-tiles__item">
<button class="gallery-tiles__slide-button" data-slide-button="{{ loop.index0 }}" data-is-button-shown="true" aria-label="expand/collapse media">
{% include 'bits/icons/expand.twig' %}
</button>
{% if item.media_type == 'Image' %}
<div class="gallery-tiles__image-container">
{{ imageMacros.createHeightOnlyCropForGallery(item.media) }}
</div>
{% else %}
<div class="gallery-tiles__video-container">
<div class="gallery-tiles__modal-video">
<img class="gallery-tiles__modal-video-splash-image" src="{{ item.media.thumbnail_url }}" alt="{{ item.media.caption | escape }}">
<button class="gallery-tiles__modal-video-play" data-slide-play-button="{{ loop.index0 }}" aria-label="play video">
{% include 'bits/icons/play-button/play-button.twig' %}
</button>
</div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{
"siteUnit": "network",
"departmentName": "Network",
"background": "light",
"component": {
"title": null,
"body": null,
"shortDescription": null
}
}
.gallery-tiles
margin-bottom 32px
&__container
display grid
grid-template-columns 1fr
grid-gap 32px
+above(600px)
grid-template-columns 1fr 1fr
&__item
position relative
z-index 1
&__image-container
position relative
&__slide-button
@extends $slide-button
&__modal-video
position relative
&__modal-video-splash-image
width 100%
&__modal-video-play
@extends $video-play
visibility visible
opacity 1
.captioned-image__gallery-image
height auto
width 100%
&__modal-video-iframe
width 100%
height 400px
There are no notes for this item.