@import url("master.css");

header {
	width: 100%;
	height: 500px;
	display: flex;
	align-items: flex-end;
}
header div.content {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0 100px -100px;
}
header div.content div:nth-of-type(1) img {
	width: 200px;
	margin-top: 20px;
}
header div.content div:nth-of-type(2) {
	flex: 1;
	margin: 0 60px;
}
header div.content div:nth-of-type(2) h1 {
	font-size: 96px;
}
header div.content div:nth-of-type(2) p {
	font-size: 20px;
}
section#highlights {
	text-align: center;
	margin: 150px 0;
}
section#highlights h1 {
	font-size: 36px;
	margin-bottom: 35px;
}
section#highlights div.content {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	width: 1000px;
	margin: 0 auto;
	gap: 10px;
}
section#highlights div.content img {
	width: 100%;
}
@media (max-width: 1000px) {
	header div.content {
		flex-direction: column;
		align-items: center;
		margin: 0 100px -200px;
		
	}
	header div.content div:nth-of-type(2) {
		text-align: center;
		margin: 20px 0;
	}
	section#highlights {
		margin: 300px 0 100px 0;
	}
	section#highlights div.content {
		width: 90%;
	}
		header div.content div:nth-of-type(2) h1 {
		font-size: 50px;
	}
	header div.content div:nth-of-type(2) p {
		font-size: 20px;
	}
}


@media (max-width: 600px) {
	section#highlights div.content { 
		grid-template-columns: 1fr;
	}
}