Предотвратить принудительное увеличение высоты контейнера внутри родительского flexbox ⇐ CSS

[Anonymous]

Мне нужно решить сложную задачу с сеткой изображений: первая строка состоит из 4 блоков по 25% в поперечнике, вторая будет состоять из 3 блоков по 2 блока по 25% и 1 изображение, занимающее 50% оставшегося. пространство.
У меня макет работает нормально, мне просто нужно зафиксировать высоту блоков 50% так же, как и блоков 25%, и ограничить изображение с помощью подгонки объекта.
Однако, что бы я ни делал, изображение большего размера внутри блока 50% увеличивается до естественной высоты изображения в зависимости от его соотношения сторон.
код можно найти здесь
https://codepen.io/alexmorris/pen/jOQyM ... d8fe4b3bee

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

    *, html {
box-sizing:border-box;
}

body {
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica     neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
margin:0;
padding:0;
}

img {
width:100%;
height:auto;
}

section {
display:flex;
flex-wrap:wrap;
flex-direction:row;
align-items:flex-start;
}

div {
flex: 0 0 25%;
}

div:nth-child(7) {
flex: 0 0 50%;
align-self: start;
}

div:nth-child(7) img {
object-fit:cover;
height:100%;
object-position:center;
}

Перепробовали все варианты гибкого сжатия, но безрезультатно.

Подробнее здесь: https://stackoverflow.com/questions/765 ... box-parent