.artlumio-tiles{
  display:grid;
  gap:0px;
  grid-template-columns: repeat(12, 1fr);
}

.artlumio-tile{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:0px;
  min-height:180px;
}

.artlumio-tile__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.01);
  transition:transform .25s ease;
}

.artlumio-tile__overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding:14px;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  opacity:0;
  transition:opacity .2s ease;
}

.artlumio-tile__title{
  color:#fff;
  font-size:16px;
  line-height:1.2;
}

.artlumio-tile:hover .artlumio-tile__overlay{ opacity:1; }
.artlumio-tile:hover .artlumio-tile__img{ transform:scale(1.06); }

/* Example collage pattern for first 7 tiles (repeat/fallback later) */
.artlumio-tile--1{ grid-column:1 / span 8; grid-row:1 / span 2; min-height:380px; }
.artlumio-tile--2{ grid-column:9 / span 4; grid-row:1 / span 1; min-height:180px; }
.artlumio-tile--3{ grid-column:9 / span 4; grid-row:2 / span 1; min-height:180px; }

.artlumio-tile--4{ grid-column:1 / span 5; grid-row:3 / span 1; min-height:220px; }
.artlumio-tile--5{ grid-column:6 / span 7; grid-row:3 / span 1; min-height:220px; }

.artlumio-tile--6{ grid-column:1 / span 4; grid-row:4 / span 1; min-height:220px; }
.artlumio-tile--7{ grid-column:5 / span 8; grid-row:4 / span 1; min-height:220px; }

/* Mobile */
@media (max-width: 780px){
  .artlumio-tiles{ grid-template-columns:1fr; }
  .artlumio-tile{ grid-column:auto; grid-row:auto; min-height:220px; }
  .artlumio-tile__overlay{ opacity:1; } /* no hover on touch */
}