@media screen and (max-width: 1910px){

	body{

		background: pink;
	}

	.cat h2{

		text-align: center;
	}

	.cat .content{

		display: block;
	}

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

		width: unset;
	}
}


@media screen and (max-width: 1300px){

	body{

		background: lime;
	}


	#cats .cat{

		width: calc(100% / 2);
	}

}

@media screen and (max-width: 900px){

	html{

		font-size: 20px;
	}

	body{

		background: lightblue;
	}

	header{

		margin-bottom: 2.4rem;
	}

	header h1{

		text-align: center;
	}

	header .intro{

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

	img{

		width: 100%;
	}

	#cats .cat{

		width: 100%;
	}

	.cat .content p{

		padding-right: 0;
	}

	.cat .content figure{

		font-size: unset;
		line-height: unset;

	}

}


@media screen and (max-width: 600px){

	html{

		font-size: 16px;
	}

	body{

		background: lightgrey;
	}

}

@media screen and (max-width: 350px){

	html{

		font-size: 12px;
	}

	body{

		background: orange;
	}

}