Как сверстать адаптивную плитку из изображений?

Попробовал сделать с Вашим решением, но все ломается, когда задаю размеры для фотографий

.row .row-cols-2 {
    display: grid;
    grid-template:
      "a b"
      "a c";
}

.left-banner{ 
	grid-area: a;
    width: 700px;
}

.banner-left-img {
	height: 100%;
    width: auto;
    max-width: 100%;
}

.top-banner{ 
	grid-area: b;
	margin-bottom: 20px;
	width: 415px;
    height: 240px;
}

.banner-top-img {
	height: 100%;
    width: auto;
    max-width: 100%;
}

.bottom-banner{ 
	grid-area: b;
	width: 415px;
    height: 240px;
}

.banner-bottom-img {
	height: 100%;
    width: auto;
    max-width: 100%;
}

@media (max-width: 700px) {
  .row .row-cols-2 {
    display: grid;
    grid-template:
      "a a"
      "b c";
  }
}

<div class="container">
<div class="row row-cols-2">
    <div class="col img-responsive left-banner"><a href="#">
            <img src="https://i.ibb.co/VgjY5NT/test.jpg" alt="#" title="#" class="banner-left-img">
        </a></div>
    <div class="col">
    <div class="col top-banner img-responsive"><a href="#">
            <img src="https://i.ibb.co/VgjY5NT/test.jpg" alt="#" title="#" class="banner-top-img">
        </a></div>
    <div class="col bottom-banner img-responsive"><a href="#">
            <img src="https://i.ibb.co/VgjY5NT/test.jpg" alt="#" title="#" class="banner-bottom-img">
        </a></div>
    </div>
  </div>
</div>

yoyoyooyoyoyoyoyoyoyoyoyo, Надо гридам размеры задавать,
50px - высота 1 строки
auto - высота 2 строки
auto высота 3 строки /50% ширина 1 столбца, calc(50% - 30px) ширина 2 столбца

grid-template:
    "i t" 50px    
    "i c" auto   
    "g g" auto/50% calc(50% - 30px);

а самим фотографиям

Width: 100%
height: 100%
object-fit: cover

Можешь пример тут посмотреть, по заголовку клацни и код эл, вообщем найди класс article-project__top