.mosaic{
  display:grid;
  width:100%;
  grid-template-columns:35fr 15fr 25fr 25fr;
  grid-template-rows:14.0625vw 14.0625vw calc(100vh - 28.125vw);
  height:100vh;
  grid-template-areas:
    "t1 t1 t3 t2"
    "t1 t1 t3 t4"
    "t5 t6 t6 t6";
  gap:0;
  background:var(--border);
  overflow:hidden;
}
html,body{overflow-x:hidden}
.mosaic-tile{min-height:0;min-width:0}
.mosaic-tile-1{grid-area:t1}
.mosaic-tile-2{grid-area:t2}
.mosaic-tile-3{grid-area:t3}
.mosaic-tile-4{grid-area:t4}
.mosaic-tile-5{grid-area:t5}
.mosaic-tile-6{grid-area:t6}

a.mosaic-tile{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--bg);
  cursor:pointer;
  width:100%;
  height:100%;
}
.mosaic-media{
  position:absolute;inset:0;
  transition:transform .6s ease, filter .3s ease;
}
.mosaic-media video,
.mosaic-media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.mosaic-media[data-placeholder="music"]        {background:linear-gradient(135deg,#0a0a0a 0%,#0f2340 60%,#1a3a6b 100%)}
.mosaic-media[data-placeholder="artist"]       {background:linear-gradient(135deg,#0a0a0a 0%,#1a2540 100%)}
.mosaic-media[data-placeholder="martial-arts"] {background:linear-gradient(135deg,#0a0a0a 0%,#132a4d 100%)}
.mosaic-media[data-placeholder="dev"]          {background:linear-gradient(135deg,#0a0a0a 0%,#12325a 100%)}
.mosaic-media[data-placeholder="travel"]       {background:linear-gradient(135deg,#0a0a0a 0%,#0d2447 100%)}
.mosaic-media[data-placeholder="build"]        {background:linear-gradient(135deg,#0a0a0a 0%,#0f1d38 50%,#1a3560 100%)}

.mosaic-label{
  position:absolute;
  left:24px;bottom:24px;
  color:rgba(255,255,255,.55);
  font-size:13px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  pointer-events:none;
  transition:color .3s ease, transform .3s ease;
  z-index:2;
}

.mosaic-tile:hover .mosaic-media{
  transform:scale(1.03);
  filter:brightness(.7);
}
.mosaic-tile:hover .mosaic-label{
  color:#fff;
  transform:translateY(-2px);
}

@media (max-width: 900px){
  .mosaic{
    height:auto;
    grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(3, 40vh) 30vh;
    grid-template-areas:
      "t1 t1"
      "t2 t3"
      "t4 t5"
      "t6 t6";
  }
  .mosaic-label{left:16px;bottom:16px;font-size:11px}
}