Bootstrap: Помощь в создании сетки изображения с 15px промежутками ⇐ CSS

[Anonymous]

Я пытаюсь построить макет изображения в HTML /CSS /Bootstrap, которая напоминает диаграмму ниже. Но у меня возникли проблемы с установлением пробелов на 15px .
Мне нравилось, чтобы изображения занимали всю высоту их контейнеров и обрезаются с помощью объекта, так как они в настоящее время.

Код: Выделить всё

Row double 50% height with gap


*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.container-fluid {
width: 80% !important;
margin: 200px auto;
background-color: green;
height: 500px;
}
.row-double {
height: 100%;
display: flex;
flex-direction: column;
gap: 15px;
}
.row-double > .row {
flex: 1;
margin: 0;
}

.row-double img {
aspect-ratio: 1 / 1;
}
figure {
margin-bottom: 0 !important;
}
figure,
.col-6 {
height: 100%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
aspect-ratio: 16 / 9;
}









[img]https://picsum.photos/1200/800[/img]




[img]https://picsum.photos/1500/800[/img]


[img]https://picsum.photos/1200/850[/img]



[img]https://picsum.photos/800/800[/img]


[img]https://picsum.photos/1200/900[/img]

Подробнее здесь: https://stackoverflow.com/questions/796 ... -15px-gaps