.images-left { float: left; width: 40%; }

.images-left .image1 { float: left; height: 500px; width: 100%; }

.images-left .image1 img { object-fit: cover; object-position: center; height: 500px; width: 100%; }

.images-left .image2 { float: right; height: 300px; width: 50%; }

.images-left .image2 img { object-fit: cover; object-position: center; height: 300px; width: 100%; }

.images-left .image3 { float: left; height: 300px; width: 50%; }

.images-left .image3 img { object-fit: cover; object-position: center; height: 300px; width: 100%; }

.images-right { float: right; width: 60%; }

.images-right .image4 { float: left; height: 800px; width: 60%; }

.images-right .image4 img { object-fit: cover; object-position: center; height: 800px; width: 100%; }

.images-right .image5 { float: left; height: 400px; width: 40%; }

.images-right .image5 img { object-fit: cover; object-position: center; height: 400px; width: 100%; }

.images-right .image6 { float: left; height: 400px; width: 40%; }

.images-right .image6 img { object-fit: cover; object-position: center; height: 400px; width: 100%; }

@media (max-width: 575px) { .images-left { width: 100%; }
  .images-right { width: 100%; }
  .images-right .image4 { width: 100%; height: 400px; }
  .images-right .image5 { width: 50%; height: 200px; }
  .images-right .image6 { width: 50%; height: 200px; } }

@media (min-width: 576px) and (max-width: 767px) { .images-left { width: 100%; }
  .images-right { width: 100%; }
  .images-right .image4 { width: 100%; height: 400px; }
  .images-right .image5 { width: 50%; height: 200px; }
  .images-right .image6 { width: 50%; height: 200px; } }