Помогите разобраться с версткой

[kudryavi]

<div class="container">
		<div class="relation">
			<div class="relation__ratio">
				<div class="relation__wrapper">					
					<div class="relation__big-img">
						<img src="img/gallery3.png" alt="gallery3">
					</div>
					<div class="relation__row relation__row1">
						<img class="relation__img" src="img/gallery1.png" alt="gallery1">
						<img class="relation__img" src="img/gallery2.png" alt="gallery2">
					</div>			
					<div class="relation__row">
						<img class="relation__img" src="img/gallery4.png" alt="gallery4">
						<img class="relation__img" src="img/gallery5.png" alt="gallery5">
					</div>					
				</div>
			</div>
		</div>
	</div>

img {
	max-width: 100%;
}

.container {
	max-width: 1290px;
}

.relation {
	position: relative;
}

.relation__ratio {
	height: 0;
	padding-top: 64.1%;
}

.relation__wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	border: 1px solid red;
}

.relation__big-img {
	width: 40%;
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
}

.relation__row {
	width: 30%;
	display: flex;
	flex-direction: column;
	flex: 1 1 100%;
}

.relation__row1 {
	order: -1;
}

.relation__img {
	flex: 1 1 50%;
}

@media screen and (max-width: 992px) {
	.relation__ratio {
		padding-top: 103.9%;
	}

	.relation__big-img {
		width: 70%;
	}

	.relation__row {
		flex-basis: 50%;
	}

	.relation__row1 {
		order: 1;
	}
}

Помогите пожалуйста разобраться, что делаю не так.

Edited March 19, 2019 by kudryavi