* { box-sizing: border-box; }

body{
	margin: 0;
	padding: 2.5rem 1rem 3rem;
	background-color: #f1f2f6;
	color: #1c2438;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	line-height: 1.5;
}
.page{
	max-width: 980px;
	margin: 0 auto;
}

/* Page heading */
.intro{
	text-align: center;
	margin-bottom: 2rem;
}
.intro h1{
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2.2rem;
	line-height: 1.2;
}
.intro p{
	margin: .5rem 0 0;
	color: #4a5368;
}
.intro::after{
	content: "";
	display: block;
	width: 70px;
	height: 4px;
	margin: 1.2rem auto 0;
	border-radius: 2px;
	background-color: #c8102e;
}

/* Flag cards */
.card{
	background-color: #fff;
	border: 1px solid #dde0e8;
	border-radius: 1rem;
	padding: 1.2rem;
	margin-bottom: 1.8rem;
	box-shadow: 0 4px 16px rgba(28, 36, 56, .1);
}
.card header{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .4rem 1rem;
	margin-bottom: .9rem;
}
.card h2{
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.5rem;
}
.tag{
	font-size: .85rem;
	color: #4a5368;
	background-color: #eef0f5;
	border-radius: 999px;
	padding: .2rem .8rem;
}
.flagbox{
	overflow-x: auto;
}

/* The flags themselves */
section{
	display: grid;
	width: 900px;
	height: 400px;
	margin: 0 auto;
	border: 1px solid #2b2b2b;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

footer{
	text-align: center;
	font-size: .9rem;
	color: #4a5368;
}

/* England */
#England{
	grid-template-columns: 375px 150px 375px;
	grid-template-rows: 125px 150px 125px;
}
#England .div1{ grid-column: 1 / 2; grid-row: 1 / 2; }
#England .div2{ grid-column: 2 / 3; grid-row: 1 / 2; background-color: #CE1124; }
#England .div3{ grid-column: 3 / 4; grid-row: 1 / 2; }
#England .div4{ grid-column: 1 / 2; grid-row: 2 / 3; background-color: #CE1124; }
#England .div5{ grid-column: 2 / 3; grid-row: 2 / 3; background-color: #CE1124; }
#England .div6{ grid-column: 3 / 4; grid-row: 2 / 3; background-color: #CE1124; }
#England .div7{ grid-column: 1 / 2; grid-row: 3 / 4; }
#England .div8{ grid-column: 2 / 3; grid-row: 3 / 4; background-color: #CE1124; }
#England .div9{ grid-column: 3 / 4; grid-row: 3 / 4; }

/* United Arab Emirates: 2 column lines + 1, 4 row lines */
#UAE{
	grid-template-columns: 225px 675px;
	grid-template-rows: 133px 134px 133px;
}
#UAE .div1{ grid-column: 1 / 2; grid-row: 1 / 4; background-color: #CE1126; }
#UAE .div2{ grid-column: 2 / 3; grid-row: 1 / 2; background-color: #009E49; }
#UAE .div3{ grid-column: 2 / 3; grid-row: 2 / 3; background-color: #FFFFFF; }
#UAE .div4{ grid-column: 2 / 3; grid-row: 3 / 4; background-color: #000000; }

/* Finland */
#Finland{
	grid-template-columns: 248px 151px 501px;
	grid-template-rows: 147px 111px 142px;
}
#Finland .div1{ grid-column: 1 / 2; grid-row: 1 / 2; }
#Finland .div2{ grid-column: 2 / 3; grid-row: 1 / 2; background-color: #003580; }
#Finland .div3{ grid-column: 3 / 4; grid-row: 1 / 2; }
#Finland .div4{ grid-column: 1 / 2; grid-row: 2 / 3; background-color: #003580; }
#Finland .div5{ grid-column: 2 / 3; grid-row: 2 / 3; background-color: #003580; }
#Finland .div6{ grid-column: 3 / 4; grid-row: 2 / 3; background-color: #003580; }
#Finland .div7{ grid-column: 1 / 2; grid-row: 3 / 4; }
#Finland .div8{ grid-column: 2 / 3; grid-row: 3 / 4; background-color: #003580; }
#Finland .div9{ grid-column: 3 / 4; grid-row: 3 / 4; }