.mkmg-grid{
  display:grid;
  width:100%;
  grid-auto-flow:dense;
}

.columns-1{grid-template-columns:repeat(1,1fr);}
.columns-2{grid-template-columns:repeat(2,1fr);}
.columns-3{grid-template-columns:repeat(3,1fr);}
.columns-4{grid-template-columns:repeat(4,1fr);}

@media (max-width: 1024px){
  .columns-3,.columns-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 767px){
  .columns-2,.columns-3,.columns-4{grid-template-columns:repeat(1,1fr);}
}

/* base tile */
.mkmg-item-wrapper{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:8px;
  background:#111;
}
.mkmg-item-wrapper img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.mkmg-item-wrapper:hover img{ transform:scale(1.03); }

/* metro sizes */
.mkmg-normal{ grid-column:span 1; grid-row:span 1; min-height:260px; }
.mkmg-wide  { grid-column:span 2; grid-row:span 1; min-height:260px; }
.mkmg-tall  { grid-column:span 1; grid-row:span 2; min-height:520px; }
.mkmg-big   { grid-column:span 2; grid-row:span 2; min-height:520px; }
.mkmg-full  { grid-column:1 / -1; grid-row:span 1; min-height:360px; }

/* responsive fallback for big spans on small screens */
@media (max-width: 767px){
  .mkmg-wide,.mkmg-big,.mkmg-full{ grid-column:span 1; }
  .mkmg-tall,.mkmg-big{ grid-row:span 1; min-height:260px; }
}

/* caption */
.mkmg-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:12px 14px;
  background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  color:#fff;
  font-size:14px;
}