<div class="Image-grid">
<div class="Image-grid__image">
<img alt="" src="/v6-assets/img/splash1000w.jpg" loading="lazy" />
</div>
<div class="Image-grid__content theme--dark flow">
<h2 class="h h-3">
Our Studio
</h2>
<div class="body flow">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="Image-grid__image">
<img alt="" src="/v6-assets/img/jeremy-keith-2x.jpg" loading="lazy" />
</div>
<div class="Image-grid__image">
<img alt="" src="/v6-assets/img/hero2.jpg" loading="lazy" />
</div>
<div class="Image-grid__image">
<img alt="" src="/v6-assets/img/splash600w.jpg" loading="lazy" />
</div>
<div class="Image-grid__image">
<img alt="" src="/v6-assets/img/hero4.jpg" loading="lazy" />
</div>
<div class="Image-grid__image">
<img alt="" src="/v6-assets/img/case600w.jpg" loading="lazy" />
</div>
<div class="Image-grid__image">
<img alt="" src="/v6-assets/img/hero1.jpg" loading="lazy" />
</div>
<div class="Image-grid__image">
<img alt="" src="/v6-assets/img/hero3.jpg" loading="lazy" />
</div>
</div>
<div class="Image-grid">
<div class="Image-grid__image">
<img alt="{{ images[0].alt }}" src="{{ images[0].src }}" loading="lazy" />
</div>
<div class="Image-grid__content theme--dark flow">
{% if title %}
<h2 class="h h-3">
{{ title }}
</h2>
{% endif %}
{% if description %}
<div class="body flow">
{{ description|raw }}
</div>
{% endif %}
</div>
<div class="Image-grid__image">
<img alt="{{ images[1].alt }}" src="{{ images[1].src }}" loading="lazy" />
</div>
<div class="Image-grid__image">
<img alt="{{ images[2].alt }}" src="{{ images[2].src }}" loading="lazy" />
</div>
<div class="Image-grid__image">
<img alt="{{ images[3].alt }}" src="{{ images[3].src }}" loading="lazy" />
</div>
<div class="Image-grid__image">
<img alt="{{ images[4].alt }}" src="{{ images[4].src }}" loading="lazy" />
</div>
<div class="Image-grid__image">
<img alt="{{ images[5].alt }}" src="{{ images[5].src }}" loading="lazy" />
</div>
<div class="Image-grid__image">
<img alt="{{ images[6].alt }}" src="{{ images[6].src }}" loading="lazy" />
</div>
<div class="Image-grid__image">
<img alt="{{ images[7].alt }}" src="{{ images[7].src }}" loading="lazy" />
</div>
</div>
{
"title": "Our Studio",
"description": "<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
"images": [
{
"src": "/v6-assets/img/splash1000w.jpg",
"alt": ""
},
{
"src": "/v6-assets/img/jeremy-keith-2x.jpg",
"alt": ""
},
{
"src": "/v6-assets/img/hero2.jpg",
"alt": ""
},
{
"src": "/v6-assets/img/splash600w.jpg",
"alt": ""
},
{
"src": "/v6-assets/img/hero4.jpg",
"alt": ""
},
{
"src": "/v6-assets/img/case600w.jpg",
"alt": ""
},
{
"src": "/v6-assets/img/hero1.jpg",
"alt": ""
},
{
"src": "/v6-assets/img/hero3.jpg",
"alt": ""
}
]
}
.Image-grid {
display: grid;
grid-gap: var(--gutter);
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 60vw auto 80vw 35vw 35vw 35vw;
&__content {
order: -4;
grid-column: span 12;
padding: var(--space-s-l);
position: relative;
z-index: 2;
}
img {
object-fit: cover;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
&__image {
background: var(--light-grey-step-1);
position: relative;
&:nth-child(1) {
order: -5;
grid-column: span 12;
}
&:nth-child(3) {
grid-column: span 12;
}
&:nth-child(4) {
grid-column: span 8;
}
&:nth-child(5) {
grid-column: span 4;
}
&:nth-child(6) {
grid-column: span 4;
}
&:nth-child(7) {
grid-column: span 8;
}
&:nth-child(8) {
grid-column: span 7;
}
&:nth-child(9) {
grid-column: span 5;
}
}
@media screen and (min-width: 35rem) {
grid-template-rows: 40vw auto 40vw 40vw 35vw 35vw;
&__image {
&:nth-child(3) {
grid-column: span 8;
order: -2;
grid-row: span 2;
}
&:nth-child(4) {
grid-column: span 6;
}
&:nth-child(5) {
grid-column: span 4;
order: -3;
}
&:nth-child(6) {
grid-column: span 4;
order: -1;
}
&:nth-child(7) {
grid-column: span 6;
}
&:nth-child(8) {
grid-column: span 7;
}
&:nth-child(9) {
grid-column: span 5;
}
}
}
@media screen and (min-width: 50rem) {
grid-template-rows: 50vw 12vw 15vw 17vw;
&__image:nth-child(1) {
grid-row: 1 / 2;
grid-column: 1 / 13;
}
&__content {
grid-row: 1 / 3;
grid-column: 1 / 9;
align-self: end;
}
&__image {
&:nth-child(3) {
grid-row: 2 / 4;
grid-column: 9 / 13;
order: unset;
}
&:nth-child(4) {
grid-column: span 4;
}
&:nth-child(5) {
grid-column: span 2;
order: unset;
}
&:nth-child(6) {
grid-column: span 2;
order: unset;
}
&:nth-child(7) {
grid-column: span 4;
}
&:nth-child(8) {
grid-column: span 5;
}
&:nth-child(9) {
grid-column: span 3;
}
}
}
@media screen and (min-width: 65rem) {
grid-template-rows: 510px 186px 198px 220px;
}
}
No notes defined.