section .wrapper .box{display:block;font-size:16px;color:#fff;background-color:#3B3C3E;margin-bottom:20px}
section .wrapper .box .img{height:200px;background-position:center;background-size:cover;background-repeat:no-repeat}
section .wrapper .box .data{font-size:16px;padding:10px}
section .wrapper .box .data a{color:#00CEFA}
section .wrapper .box .data a:first-of-type{font-weight:bolder}
section .wrapper .box .data a p{color:#fff}
section .wrapper .box .data p{text-shadow:1px 1px 2px #000;font-weight:bolder;font-size:22px;margin:0px 0px 10px 0px}

@media screen and (min-width:768px){
	section {width:75%; margin-left:4%}
	section .wrapper{display:grid;grid-template-columns:48% 48%;grid-gap:20px}
	section .wrapper .box .img{height:160px} 
	section .wrapper .box .data p{font-size:18px}
}
@media screen and (min-width:1024px){
	section .wrapper .box{border:1px solid #fff;transition:border .2s}
	section .wrapper .box:hover{border:1px solid #181818}
	section .wrapper .box .img{height:200px} 
	section .wrapper .box .data a:hover{color:#fff} 
	section .wrapper{grid-template-columns:24% 24% 24% 24%}
	section article{width:60%; margin-left:5%}
}
@media screen and (min-width:1600px){
	section{width:70%} 
}