<section class="vbw-root" aria-label="Flip tile wall">

<div class="vbw-glow vbw-glow--a" aria-hidden="true"></div>
<div class="vbw-glow vbw-glow--b" aria-hidden="true"></div>

<div class="vbw-scene">

<div class="vbw-main-media" aria-label="Main Image">
<img class="vbw-photo-source" data-tilda-img="y" src="https://static.tildacdn.com/tild6262-3462-4233-b963-646265396633/Full_image.jpg" alt="">
</div>

<div class="vbw-cards" aria-label="Cards">

<article class="vbw-card" aria-label="Card 1">
<div class="vbw-card__inner">

<div class="vbw-card__face vbw-card__face--front" aria-hidden="true">
<div class="vbw-card__front-image"></div>
</div>

<div class="vbw-card__face vbw-card__face--back">
<img class="vbw-card__image" data-tilda-img="y" src="https://static.tildacdn.com/tild3864-3761-4137-b034-343966636234/111.jpg" alt="">

<p class="vbw-card__description" data-tilda-edit="y">Pale limestone gives the facade a quiet, tactile character.</p>
</div>

</div>
</article>

<article class="vbw-card" aria-label="Card 2">
<div class="vbw-card__inner">

<div class="vbw-card__face vbw-card__face--front" aria-hidden="true">
<div class="vbw-card__front-image"></div>
</div>

<div class="vbw-card__face vbw-card__face--back">
<img class="vbw-card__image" data-tilda-img="y" src="https://static.tildacdn.com/tild3739-3030-4836-b833-303965366566/444.jpg" alt="">

<p class="vbw-card__description" data-tilda-edit="y">A sheltered lounge extends the living space outdoors.</p>
</div>

</div>
</article>

<article class="vbw-card" aria-label="Card 3">
<div class="vbw-card__inner">

<div class="vbw-card__face vbw-card__face--front" aria-hidden="true">
<div class="vbw-card__front-image"></div>
</div>

<div class="vbw-card__face vbw-card__face--back">
<img class="vbw-card__image" data-tilda-img="y" src="https://static.tildacdn.com/tild3035-6432-4764-a236-633638613064/333.jpg" alt="">

<p class="vbw-card__description" data-tilda-edit="y">An oak door sits within a recessed stone portal.</p>
</div>

</div>
</article>

<article class="vbw-card" aria-label="Card 4">
<div class="vbw-card__inner">

<div class="vbw-card__face vbw-card__face--front" aria-hidden="true">
<div class="vbw-card__front-image"></div>
</div>

<div class="vbw-card__face vbw-card__face--back">
<img class="vbw-card__image" data-tilda-img="y" src="https://static.tildacdn.com/tild6262-6534-4062-b136-383633376538/222.jpg" alt="">

<p class="vbw-card__description" data-tilda-edit="y">Full-height glazing opens the living room to the garden.</p>
</div>

</div>
</article>

<article class="vbw-card" aria-label="Card 5">
<div class="vbw-card__inner">

<div class="vbw-card__face vbw-card__face--front" aria-hidden="true">
<div class="vbw-card__front-image"></div>
</div>

<div class="vbw-card__face vbw-card__face--back">
<img class="vbw-card__image" data-tilda-img="y" src="https://static.tildacdn.com/tild6436-3239-4339-b936-323330383434/555.jpg" alt="">

<p class="vbw-card__description" data-tilda-edit="y">Natural stone island anchors the warm open kitchen.</p>
</div>

</div>
</article>

<article class="vbw-card" aria-label="Card 6">
<div class="vbw-card__inner">

<div class="vbw-card__face vbw-card__face--front" aria-hidden="true">
<div class="vbw-card__front-image"></div>
</div>

<div class="vbw-card__face vbw-card__face--back">
<img class="vbw-card__image" data-tilda-img="y" src="https://static.tildacdn.com/tild3036-6639-4864-a265-623433303039/666.jpg" alt="">

<p class="vbw-card__description" data-tilda-edit="y">Soft linen textures frame peaceful garden views.</p>
</div>

</div>
</article>

<article class="vbw-card" aria-label="Card 7">
<div class="vbw-card__inner">

<div class="vbw-card__face vbw-card__face--front" aria-hidden="true">
<div class="vbw-card__front-image"></div>
</div>

<div class="vbw-card__face vbw-card__face--back">
<img class="vbw-card__image" data-tilda-img="y" src="https://static.tildacdn.com/tild6337-3438-4464-a363-306437626238/777.jpg" alt="">

<p class="vbw-card__description" data-tilda-edit="y">Travertine surfaces create a calm spa-like retreat.</p>
</div>

</div>
</article>

<article class="vbw-card" aria-label="Card 8">
<div class="vbw-card__inner">

<div class="vbw-card__face vbw-card__face--front" aria-hidden="true">
<div class="vbw-card__front-image"></div>
</div>

<div class="vbw-card__face vbw-card__face--back">
<img class="vbw-card__image" data-tilda-img="y" src="https://static.tildacdn.com/tild3238-3364-4338-b061-303266646461/888.jpg" alt="">

<p class="vbw-card__description" data-tilda-edit="y">Sculptural lighting complements warm wood and natural textures.</p>
</div>

</div>
</article>

</div>

</div>

<style>
.vbw-root,
.vbw-root * {
box-sizing: border-box;
}

.vbw-root {
position: relative;

display: flex;
align-items: center;
justify-content: center;

width: 100%;
min-height: 680px;

padding:
72px 24px;

overflow: hidden;

background:
#ffffff;

font-family:
Arial,
Helvetica,
sans-serif;
}

.vbw-glow {
display: none;
}

.vbw-scene {
position: relative;

z-index: 2;

width:
min(88vw,1120px);
}

.vbw-main-media {
position: absolute;

width: 1px;
height: 1px;

overflow: hidden;

clip-path:
inset(50%);

pointer-events: none;
}

.vbw-photo-source {
display: block;

width: 1px;
height: 1px;
}

.vbw-cards {
display: grid;

grid-template-columns:
repeat(4,minmax(0,1fr));

gap: 6px;

width: 100%;
}

.vbw-card {
position: relative;

aspect-ratio:
1 / 1;

min-width: 0;

perspective:
1100px;

outline: none;
}

.vbw-card__inner {
position: absolute;

inset: 0;

transform-style:
preserve-3d;

transition:
transform
620ms
cubic-bezier(0.2,0.72,0.2,1);

will-change:
transform;
}

.vbw-card:hover
.vbw-card__inner,
.vbw-card:focus-within
.vbw-card__inner,
.vbw-card.is-flipped
.vbw-card__inner {
transform:
rotateY(180deg);
}

.vbw-card__face {
position: absolute;

inset: 0;

overflow: hidden;

border-radius: 6px;

backface-visibility:
hidden;

-webkit-backface-visibility:
hidden;
}

.vbw-card__face--front {
background:
#161616;
}

.vbw-card__front-image {
position: absolute;

inset: 0;

background-repeat:
no-repeat;

background-size:
400% 200%;

background-position:
var(--vbw-front-x,0%)
var(--vbw-front-y,0%);

transform:
scale(1.012);

transition:
transform
700ms
ease;
}

.vbw-card:hover
.vbw-card__front-image {
transform:
scale(1.04);
}

.vbw-card__face--back {
display: flex;
flex-direction: column;
justify-content: space-between;

gap: 18px;

padding:
clamp(16px,2vw,24px);

transform:
rotateY(180deg);

background:
#ededed;

color:
#121212;
}

.vbw-card__image {
display: block;

width:
clamp(52px,6vw,76px);

aspect-ratio:
1 / 1;

flex: 0 0 auto;

object-fit:
cover;

object-position:
center;

border-radius: 4px;
}

.vbw-card__description {
width: 100%;
max-width: none;

margin: 0;

font-size:
clamp(13px,1.35vw,18px);

font-weight: 400;
line-height: 1.35;

letter-spacing:
-0.015em;

color:
#121212;

overflow-wrap:
anywhere;
}

.vbw-card:nth-child(1)
.vbw-card__front-image {
--vbw-front-x: 0%;
--vbw-front-y: 0%;
}

.vbw-card:nth-child(2)
.vbw-card__front-image {
--vbw-front-x: 33.333333%;
--vbw-front-y: 0%;
}

.vbw-card:nth-child(3)
.vbw-card__front-image {
--vbw-front-x: 66.666667%;
--vbw-front-y: 0%;
}

.vbw-card:nth-child(4)
.vbw-card__front-image {
--vbw-front-x: 100%;
--vbw-front-y: 0%;
}

.vbw-card:nth-child(5)
.vbw-card__front-image {
--vbw-front-x: 0%;
--vbw-front-y: 100%;
}

.vbw-card:nth-child(6)
.vbw-card__front-image {
--vbw-front-x: 33.333333%;
--vbw-front-y: 100%;
}

.vbw-card:nth-child(7)
.vbw-card__front-image {
--vbw-front-x: 66.666667%;
--vbw-front-y: 100%;
}

.vbw-card:nth-child(8)
.vbw-card__front-image {
--vbw-front-x: 100%;
--vbw-front-y: 100%;
}

@media
(max-width: 767px) {

.vbw-root {
min-height: 0;

padding:
40px 14px;

overflow:
visible;
}

.vbw-scene {
width: 100%;
}

.vbw-main-media {
position: relative;

width: 100%;
height: auto;

margin:
0 0 14px;

overflow: visible;

clip-path: none;

pointer-events: auto;
}

.vbw-photo-source {
display: block;

width: 100%;
height: auto;

aspect-ratio:
16 / 10;

object-fit:
cover;

object-position:
center;

border-radius:
6px;
}

.vbw-cards {
display: grid;

grid-template-columns:
1fr;

gap: 10px;

width: 100%;
}

.vbw-card {
aspect-ratio:
auto;

perspective:
none;

cursor:
default;
}

.vbw-card__inner {
position: relative;

inset: auto;

display: block;

transform:
none !important;

transform-style:
flat;

transition:
none !important;
}

.vbw-card__face {
position: relative;

inset: auto;

backface-visibility:
visible;

-webkit-backface-visibility:
visible;
}

.vbw-card__face--front {
display: none;
}

.vbw-card__face--back {
display: grid;

grid-template-columns:
104px minmax(0,1fr);

align-items:
center;

gap: 14px;

min-height:
124px;

padding:
10px;

transform:
none !important;

border-radius:
6px;

background:
#ededed;

color:
#121212;
}

.vbw-card__image {
width: 104px;
height: 104px;

max-width: none;

aspect-ratio:
1 / 1;

object-fit:
cover;

object-position:
center;

border-radius:
4px;
}

.vbw-card__description {
width: 100%;
max-width: none;

margin: 0;

font-size:
15px;

line-height:
1.35;
}

.vbw-card:hover
.vbw-card__inner,
.vbw-card:focus-within
.vbw-card__inner,
.vbw-card.is-flipped
.vbw-card__inner {
transform:
none !important;
}
}

@media
(hover: none),
(pointer: coarse) {

.vbw-card:hover
.vbw-card__inner {
transform:
none;
}

.vbw-card.is-flipped
.vbw-card__inner {
transform:
rotateY(180deg);
}
}

@media
(prefers-reduced-motion: reduce) {

.vbw-card__inner,
.vbw-card__front-image {
transition:
none !important;
}
}
</style>

<script>
(function () {
'use strict';

var script =
document.currentScript;

var root =
script &&
script.closest
? script.closest(
'.vbw-root'
)
: null;

if (
!root ||
root.classList.contains(
'vbw-ready'
)
) {
return;
}

root.classList.add(
'vbw-ready'
);

var sourceImage =
root.querySelector(
'.vbw-photo-source'
);

var frontImages =
Array.prototype.slice.call(
root.querySelectorAll(
'.vbw-card__front-image'
)
);

var cards =
Array.prototype.slice.call(
root.querySelectorAll(
'.vbw-card'
)
);

if (
!sourceImage ||
!frontImages.length ||
!cards.length
) {
return;
}

var touchMode =
window.matchMedia(
'(hover: none), (pointer: coarse)'
);

var simpleMobile =
window.matchMedia(
'(max-width: 767px)'
);

var editorMode =
false;

try {
editorMode =
window.self !==
window.top;
}
catch (error) {
editorMode =
true;
}

function cssUrl(
value
) {
return (
'url(' +
JSON.stringify(
value
) +
')'
);
}

function syncMainImage() {

var source =
sourceImage.getAttribute(
'src'
) ||
sourceImage.currentSrc ||
'';

if (
!source
) {
return;
}

var background =
cssUrl(
source
);

frontImages.forEach(
function (item) {

item.style.backgroundImage =
background;
}
);
}

syncMainImage();

sourceImage.addEventListener(
'load',
syncMainImage
);

if (
'MutationObserver' in window
) {

var imageObserver =
new MutationObserver(
syncMainImage
);

imageObserver.observe(
sourceImage,
{
attributes: true,
attributeFilter: [
'src',
'srcset',
'data-src'
]
}
);
}

root.addEventListener(
'click',
function (event) {

if (
simpleMobile.matches ||
!touchMode.matches
) {
return;
}

if (
editorMode &&
event.target.closest &&
event.target.closest(
'[data-tilda-img="y"], [data-tilda-edit="y"]'
)
) {
return;
}

var card =
event.target.closest(
'.vbw-card'
);

if (
!card ||
!root.contains(
card
)
) {
return;
}

cards.forEach(
function (item) {

if (
item !==
card
) {
item.classList.remove(
'is-flipped'
);
}
}
);

card.classList.toggle(
'is-flipped'
);
}
);

root.addEventListener(
'keydown',
function (event) {

if (
simpleMobile.matches ||
(
event.key !==
'Enter' &&
event.key !==
' '
)
) {
return;
}

var card =
event.target.closest(
'.vbw-card'
);

if (
!card
) {
return;
}

event.preventDefault();

card.classList.toggle(
'is-flipped'
);
}
);

cards.forEach(
function (card) {

card.setAttribute(
'tabindex',
'0'
);
}
);

})();
</script>

</section>

<style data-vb-overrides="true">
.vbw-card__image {
width: calc(160px);
}

.vbw-card__description {
font-size: calc(16px);
width: 100%;
max-width: none;
}
</style>

<style data-vb-mobile-overrides="true">
@media (max-width: 767px) {
.vbw-card__image {
width: 104px;
height: 104px;
}

.vbw-card__description {
font-size: 15px;
width: 100%;
max-width: none;
}
}
</style>