@media only screen and (min-width: 320px) and (max-width: 740px) {
	.cases{display: grid;grid-template-columns: repeat(auto-fill,minmax(calc(50% - 0.27rem),1fr));
	    grid-gap: 0.32rem 0.27rem;}
 			}					
 @media only screen and (min-width: 741px) and (max-width:1200px) {	
	.cases{display: grid;grid-template-columns: repeat(auto-fill,minmax(calc(33.33% - 0.42rem),1fr));
	    grid-gap: 0.32rem 0.42rem;}
 			}
 @media only screen and (min-width: 1200px)  {					
	.cases{display: grid;grid-template-columns: repeat(auto-fill,minmax(calc(33.33% - 0.42rem),1fr));
	    grid-gap: 0.32rem 0.42rem;}
 			}	
	.banner{background: url(../images/bannerprojects.webp) no-repeat;background-size: cover;padding: 1.57rem 0 1.32rem 0;}
	.banner h1{color: #F0F2F3;font-size: 0.67rem;}
	.crumbs {font-size: max(12px, 0.18rem);color: #699D3E}
	.crumbs a{font-size: max(12px, 0.18rem);color: #FFFFFF;}
	.content{margin: 0.8rem 0 0 0;}
	.cases img{width: 100%;height: auto;}
	.cases li{padding: 0.15rem;border-radius: 5px;box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.16);}
	.cases li h3{font-size: max(14px, 0.22rem);color: #333;font-weight: 400;text-align: center;margin-top: 3px;}
	.cases li:hover{background: #699D3E;}
	.cases li:hover h3{color: #fff;}
	.pagination{text-align:center;margin:3% 0;line-height:23px;}
	.pagination span, .pagination a{font-size:14px;margin:2px 6px 2px 0;background:#fff;border:1px solid #699D3E;color:#699D3E;padding:6px 10px;text-decoration:none;}
	.pagination a:hover{background:#699D3E;color:#fff;}
	.pagination .current{background:#699D3E;border:1px solid #699D3E;color:#fff;font-size:14px;padding:6px 10px;}