@media only screen and (min-width: 600px) {
 body {
	max-width: 1000px;
 }

 .grid {
	 grid-template-columns: repeat(2, 1fr);
 }

 .downloads {
 	position:absolute;
 	top:50%;
 	left:50%;
 	transform: translate(-50%, -50%);
 	opacity: 0%;
 	transition: .15s;
 }

 .gridelem:hover .downloads {
 	opacity: 100%;
 }
}

@media only screen and (max-width: 600px) {
 body {
	max-width: 600px;
 }

 .grid {
	 grid-template-columns: 1fr;
 }
 .downloads {
 	padding-top: 15px;
 	padding-bottom: 30px;
 }
}


body {
	margin: auto;
}

.grid {
	display: grid;
	grid-gap: 10px;
	margin: 10px;
}

.gridelem {
	position: relative;
}

.gridelem img {
	width: 100%;
}

.download {
	padding: 10px;
	background: #333;
	border-radius: 100%;
	transition: .3s;
}

.download:hover {
	background: #555;
}