body,
html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}

:root {
  --m-full-width: 100vw;
  --m-full-height: 100vh;
  --m-img-url: "";
  --m-tile-width: 20vw;
  --m-tile-height: 20vh;
  --m-tile-row: 0;
  --m-tile-col: 0;
}

.mosaic {
  position: absolute;
  width: var(--m-full-width);
  height: var(--m-full-height);
  overflow: hidden;
}

.tile {
  position: absolute;
  top: var(--m-tile-top);
  left: var(--m-tile-left);
  width: var(--m-tile-width);
  height: var(--m-tile-height);
  overflow: hidden;
  --m-tile-top: calc(var(--m-tile-row) * var(--m-tile-height));
  --m-tile-left: calc(var(--m-tile-col) * var(--m-tile-width));
  transition: scale 0.5s; /*TODO*/
}
.tile:after {
  display: block;
  content: "";
  position: absolute;
  top: calc(-1 * var(--m-tile-top));
  left: calc(-1 * var(--m-tile-left));
  width: var(--m-full-width);
  height: var(--m-full-height);
  background: var(--m-img-url) no-repeat;
  background-size: cover;
  clip-path: polygon(
    var(--m-tile-left) var(--m-tile-top),
    calc(var(--m-tile-left) + var(--m-tile-width)) var(--m-tile-top),
    calc(var(--m-tile-left) + var(--m-tile-width))
      calc(var(--m-tile-top) + var(--m-tile-height)),
    var(--m-tile-left) calc(var(--m-tile-top) + var(--m-tile-height))
  );
}

/*To prevent showing content before it's processed by JS*/
[data-mosaic-show] {
  display: none;
}