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

[Anonymous]

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

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

*,
*::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;
}< /code>






Row double 50% height with gap









[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