/* MONALISA | Bento gallery, all source photographs kept in their natural shape
   Desktop: 6x2 exact tiling, kitchen original photo 3x2; 6 square tiles 1x1.
   Tablet: 3 columns with 1 landscape feature + 6 squares.
   Mobile: 2 columns with 1 landscape feature + 6 squares.
*/
.spaces-grid.spaces-grid-bento{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-flow:row dense;
  grid-auto-rows:auto;
  gap:clamp(7px,.9vw,12px);
  align-items:stretch;
  width:100%;
}
.spaces-grid.spaces-grid-bento > .space-card{
  display:block;
  grid-column:span 1;
  grid-row:span 1;
  min-height:0;
  width:100%;
  aspect-ratio:1 / 1;
  position:relative;
  border-radius:8px;
  overflow:hidden;
  isolation:isolate;
  background:#d5d0c9;
}
.spaces-grid.spaces-grid-bento > .space-card.space-card-featured{
  grid-column:span 3;
  grid-row:span 2;
  aspect-ratio:2100 / 1401;
}
.spaces-grid.spaces-grid-bento > .space-card img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:brightness(.89);
  transform:scale(1);
  transition:transform .75s cubic-bezier(.2,.7,.2,1),filter .7s ease;
}
.spaces-grid.spaces-grid-bento > .space-card:hover img{
  transform:scale(1.045);
  filter:brightness(.74);
}
.spaces-grid.spaces-grid-bento > .space-card:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to top,rgba(18,16,15,.7) 0%,transparent 47%);
}
.spaces-grid.spaces-grid-bento > .space-card .space-label{
  z-index:2;
  left:16px;
  right:16px;
  bottom:16px;
  font-size:clamp(13px,1.35vw,23px);
  line-height:1.1;
  font-weight:400;
  letter-spacing:-.04em;
  text-shadow:0 2px 12px rgba(0,0,0,.15);
}
.spaces-grid.spaces-grid-bento > .space-card.space-card-featured .space-label{
  font-size:clamp(25px,2.5vw,40px);
  left:27px;
  right:27px;
  bottom:25px;
}
.spaces-grid.spaces-grid-bento > .space-card .space-label span{
  font-size:clamp(17px,1.7vw,28px);
  line-height:1;
  transform:translate(0,0);
  transition:transform .35s ease;
}
.spaces-grid.spaces-grid-bento > .space-card:hover .space-label span{
  transform:translate(3px,-3px);
}
.spaces-grid.spaces-grid-bento > .space-card:focus-visible{
  outline:3px solid #987967;
  outline-offset:3px;
}
@media (max-width:1100px){
  .spaces-grid.spaces-grid-bento{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .spaces-grid.spaces-grid-bento > .space-card.space-card-featured{
    grid-column:span 3;
    grid-row:span 1;
    aspect-ratio:2100 / 1401;
  }
  .spaces-grid.spaces-grid-bento > .space-card .space-label{
    left:14px;right:14px;bottom:14px;font-size:clamp(16px,2.2vw,23px)
  }
}
@media (max-width:650px){
  .spaces-grid.spaces-grid-bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .spaces-grid.spaces-grid-bento > .space-card.space-card-featured{
    grid-column:span 2;grid-row:span 1;aspect-ratio:2100 / 1401;
  }
  .spaces-grid.spaces-grid-bento > .space-card{
    border-radius:6px;
  }
  .spaces-grid.spaces-grid-bento > .space-card .space-label{
    left:10px;right:10px;bottom:11px;font-size:clamp(14px,3.3vw,18px);
  }
  .spaces-grid.spaces-grid-bento > .space-card.space-card-featured .space-label{
    left:19px;right:19px;bottom:19px;font-size:clamp(25px,6vw,35px);
  }
  .spaces-grid.spaces-grid-bento > .space-card .space-label span{font-size:18px}
}