#p404 h1 { margin-bottom: 10px; }
#p404 ul { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
#p404 h2 { margin-top: 50px; }
#p404 ul li a { display: block; height: 100%; box-sizing:border-box; border: 1px solid #e7e6e6; border-radius: 6px; box-shadow: 0 -3px #717171 inset; transition:all 0.5s ease; padding: 40px; }
#p404 ul li a span { font-size: 40px; display: block; margin-bottom: 15px; }
#p404 ul li a:hover { box-shadow: 0 -3px var(--hover-color) inset; }

@media screen and (min-width: 1200px) {	
	#p404 h1 { font-size: 80px; line-height: 90px; max-width: 1100px; }
}
@media screen and (min-width: 600px) and (max-width: 1199px) {
	#p404 h1 { font-size: 66px; line-height: 72px; }
	#p404 ul { grid-template-columns: repeat(2,1fr); }
}
@media screen and (max-width: 599px) {
	#p404 h1 { font-size: 58px; line-height: 66px; }
	#p404 ul { grid-template-columns: repeat(2,1fr); }
}
@media screen and (max-width: 420px) {
	#p404 ul { grid-template-columns: repeat(1,1fr); }
}