Как адаптировать изображения в блоке?

ArtJH, Короче, перепишу весь код, спасибо огромное за предоставленную помощь, все же, отмечу вас решением

Как адаптировать изображения в блоке?

ArtJH, про качество в курсе, а так, не сработало...

Как адаптировать изображения в блоке?

ArtJH, https://codepen.io/Laybe/pen/VwjKvgJ

Как адаптировать изображения в блоке?

ArtJH, Выше указал проблемные места с кодом, чекните, если требуется еще что-нибудь, скину

Как адаптировать изображения в блоке?

К сожалению, не помогли...
Благодарю за попытку

Как адаптировать изображения в блоке?

Вадим,

(собственно сам блок)
articles {
background-color: #121214;
height: 1000px;
width: 82.88333333333333%;
float: right;
}

Думаю, дело даже не в блоке, а в самих изображениях. Каждое изображение имеет разную ширину и высоту и выставлены в ряд, вот пример одного изображения
.box2 {
width: 811px;
height: 314px;
position: absolute;
overflow: hidden;
margin: -580px 764px;
}
.box2 img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 811px;
height: 314px;
object-fit: cover;
}

Дело в том, что изображения обрезаются, чтобы каждая картинка хорошо смотрелась с той или иной шириной и высотой