* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Voyage";
}

html,
body {
	background: #f7eec9;
}

.container {
	width: 100%;
	height: 100vh;
}

.column {
	width: 50%;
	height: 100vh;
}

.left {
	position: relative;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: url("images/main.jpg") no-repeat 50% 50%;
	background-size: cover;
	padding: 20px;
}

.right {
	display: flex;
	padding: 120px 0;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.img {
	width: 160px;
	height: 200px;
	margin: 6px;
}

.img-1 {
	background: url("images/main4.jpg") no-repeat 50% 50%;
	background-size: cover;
}

.img-2 {
	background: url("images/main3.jpg") no-repeat 50% 50%;
	background-size: cover;
}

.img-3 {
	background: url("images/main1.jpg") no-repeat 50% 50%;
	background-size: cover;
}

.img-4 {
	background: url("images/main2.jpg") no-repeat 50% 50%;
	background-size: cover;
}

.header {
	color: #142245;
	text-transform: uppercase;
	font-size: 40px;
}

.header h1 {
	position: relative;
}

.ml12 .letter {
	display: inline-block;
	line-height: 1em;
}

.link a {
	color: rgb(203, 25, 25);
	text-transform: uppercase;
	font-size: 40px;
	font-family: "Neutral Face";
}

@media (min-width: 900px) {
	.container {
		display: flex;
	}

	.images {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

@media (max-width: 900px) {
	.column {
		width: 100%;
	}

	.img {
		width: 400px;
		height: 400px;
	}

	.header {
		font-size: 20px;
		padding: 80px 0;
	}
}