.image1 { float: left; height: 500px; width: 30%; }

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

.image2 { float: right; height: 800px; width: 70%; }

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

.image3 { float: left; height: 300px; width: 15%; }

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

.image4 { float: left; height: 300px; width: 15%; }

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

@media (max-width: 575px) { .image1, .image2, .image3, .image4 { width: 100%; height: 350px; padding: 0px 15px; margin-bottom: 15px; }
  .image1 img, .image2 img, .image3 img, .image4 img { width: 100%; height: 350px; } }

@media (min-width: 576px) and (max-width: 767px) { .image1, .image2, .image3, .image4 { width: 100%; height: 350px; padding: 0px 15px; margin-bottom: 15px; }
  .image1 img, .image2 img, .image3 img, .image4 img { width: 100%; height: 350px; } }

@media (min-width: 768px) and (max-width: 991px) { .image2 { float: right; height: 800px; width: 50%; }
  .image1 { float: left; height: 500px; width: 50%; }
  .image3 { float: left; height: 300px; width: 25%; }
  .image4 { float: left; height: 300px; width: 25%; } }

@media (min-width: 992px) and (max-width: 1199px) { .image2 { float: right; height: 800px; width: 50%; }
  .image1 { float: left; height: 500px; width: 50%; }
  .image3 { float: left; height: 300px; width: 25%; }
  .image4 { float: left; height: 300px; width: 25%; } }