Охватывать изображения несколькими элементами div с пространством между ними ⇐ CSS

[Anonymous]

Я пытаюсь создать одно фоновое изображение, охватывающее несколько элементов div.
Ниже приведен пример того, как должен выглядеть результат:


Как видите, это одно полное изображение, перекрывающее 4 элемента div. Например, Figma, я могу просто использовать маски, чтобы получить результат, но в CSS все немного сложнее. Ниже описано, что я пробовал:

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

this is some text
this is some text
this is some text
this is some text


body {
background-color: #000;
color: #fff;
}

.cards {
width: 1024px;
height: 500px;
background-image: url('https://images.pexels.com/photos/12984738/pexels-photo-12984738.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: cover;
}

.card {
background-color: #2563eb;
border-radius: 20px;
background-color: #38bdf81a;
background-image: linear-gradient(135deg, #0ea5e980 10%, #0000 0, #0000 50%, #0ea5e980 0, #0ea5e980 60%, #0000 0, #0000);
background-size: 7.07px 7.07px;
}

но есть проблема: изображение находится не в полях, а в разделе карточек. Как мне перекрыть изображения, чтобы результат был таким, как прилагается? Обратите внимание, что между ящиками должен быть зазор.
https://codepen.io/pen?template=vYwqrWe

Подробнее здесь: https://stackoverflow.com/questions/786 ... ce-between