html{

	font-size: 16px;
}

body{

	font-family: sans-serif;
	padding: 1.2rem 0;
	line-height: 1.2rem;
	background: yellow;
}

img{

	max-width: 100%;
}

header{

	margin-bottom: 4.8rem;
	padding: 0 1.2rem;
	font-size: 2.4rem;
	line-height: 2.4rem;
}


header h1{

	margin-bottom: 2.4rem;
}

header .intro{

	max-width: 80rem;
}

#cats{

	display: flex;
	flex-wrap: wrap;
}

#cats .cat{

	width: calc(100% / 3);
	padding: 0 1.2rem;
	margin-bottom: 2.4rem;
}

.cat h2{

	font-size: 2.4rem;
	line-height: 2.4rem;
	font-family: cursive;
}

.cat  h2,
.cat .content p{

	margin-bottom: 1.2rem;
}


.cat .content{

	display: flex;
	flex-wrap: wrap;
}

.cat .content p,
.cat .content figure{

	width: 50%;
}


.cat .content figure{

	font-size: 0.75rem;
	line-height: 1rem;
}

.cat .content p{

	padding-right: 1.2rem;
}