ul.fonts,
ul.fonts li{float: left; margin: 0px; padding: 0px; list-style: none; position: relative;}
ul.fonts{width: 100%; background-color: white;}
ul.fonts li{width: calc(25% - 30px); margin: 15px;} /* background-color: #f1eee4;*/
ul.fonts li a:hover img{opacity: 0.7;}
ul.fonts li a{float: left; width: 100%; text-decoration: none; color: #343434;}
ul.fonts li a img{float:left;}
ul.fonts li h2{float: left; width: 100%; margin: 10px 0 0 0; font-size: 19px; font-weight: normal; height: 25px; overflow: hidden; }
ul.fonts li h2 a:hover{text-decoration: underline;}
ul.fonts li h2 a{float: none;}
ul.fonts li p{float: left; margin: 5px 0 0 0; height: 44px; overflow: hidden; color: black;}

@media screen and (max-width:900px) {
	ul.fonts li{width: calc(33.3% - 30px);} 
}

@media screen and (max-width:600px){
	ul.fonts li{width: calc(50% - 20px);margin:10px;}	
}

@media screen and (max-width:300px) {
	ul.fonts li{width: calc(100% - 10px); margin: 5px;} 
	ul.fonts li h2{height: auto;	}
}