Mosaic css

<style>
  .mosaic {
    position: relative;
    background-color: blue;
    height: 402px;
    width: 402px;
    margin: auto;
  }

  .mosaic img {
    position: absolute;
    z-index: 2;
    background-color: red;
    display: block;
  }

  .mosaic img:nth-child(1) {
    width: 100px;
    height: 200px;
    top: 0;
    right: 0;
  }

  .mosaic img:nth-child(2) {
    width: 300px;
    height: 200px;
    top: 0;
    left: 0;
  }

  .mosaic img:nth-child(3) {
    width: 200px;
    height: 200px;
    bottom: 0;
    right: 0;
  }

  .mosaic img:nth-child(4) {
    width: 200px;
    height: 200px;
    bottom: 0;
    left: 0;
  }
</style>
<div class="mosaic">
  <img src="">
  <img src="">
  <img src="">
  <img src="">
</div>