#content{
	margin: auto;
	margin-bottom: 4%;
}
@media screen and (min-width: 1301px) {
	#content{
		width: 80%;
	}
	.card-title{
		font-size: 30px;
		margin: 2% 0;
	}
	.card{
		width: 21.6%;
		margin: 1% 1.4%;
	}
	.hotcard{
		width: 30%;
		margin: 1% 1.4%;
	}
}
@media screen and (min-width: 1024px) and (max-width: 1300.9px) {
	#content{
		width: 90%;
	}
	.card-title{
		font-size: 25px;
		margin: 2% 0;
	}
	.card{
		width: 21.5%;
		margin: 1% 1.4%;
	}
	.hotcard{
		width: 30%;
		margin: 1% 1.4%;
	}
}
@media screen and (min-width: 721px) and (max-width: 1023.9px) {
	#content{
		width: 90%;
	}
	.card-title{
		font-size: 20px;
		margin: 2% 2%;
	}
	.hotcard,
	.card{
		width: 28%;
		margin: 1% 2.2%;
	}
}
@media screen and (min-width: 721px) {
	
}
@media screen and (max-width: 720.9px) {
/*#content{display: none;}*/
	#content{
		width: 95%;
		margin-left: 5%;
	}
}
@media screen and (min-width: 360px) and (max-width: 720.9px) {
	.card-title{
		font-size: 18px;
		margin: 2% 2%;
	}
	.hotcard,
	.card{
		width: 50%;
		margin: 3% 3%;
	}
}
@media screen and (max-width: 359.9px) {
	.card-title{
		font-size: 16px;
		margin: 2% 2%;
	}
	.hotcard,
	.card{
		width: 40%;
		margin: 3% 3%;
	}
}