style.css

/*Global styles*/
body{font-family: "Arial"; text-align: center;}
a{text-decoration: none; color:#0096ff;}

/*header styles*/
header .title{font-size:36px;}
header .tagline{font-size:18px;}

/*product-container styles*/
.product-container{position: relative; width:32%; border:1px solid #aaa; margin:1%; display:inline-block; float:left;}
.product-container:hover .product-description, .product-container:hover .close-button{visibility: visible; opacity: 1;}
.product-container img{width:100%; height:auto;}

.col2{margin:1% auto;}

.title{font-size:16px;}
.tagline{font-size:16px;}
.description{padding:10px;}
.product-description{position:absolute; top:0px; left:0; width:100%; height: 100%; background: rgba(0,0,0,0.7); color: #fff; visibility: hidden; opacity: 0; transition: all 1s; -webkit-transition: all 1s; padding:30px 10px 10px 10px; overflow:scroll;}
.close-button{position:absolute; top:0; left:90%; color: #b20000; text-align: right; padding: 5px 10px; z-index: 1;}
.close-button:hover{cursor: pointer;}


/* Small devices (tablets, 768px) */
@media (max-width: 768px) {
	.product-container{width: 48%; float:none;}
	.col2 {margin:1%;}
}

/*Smaller devices (phones, 512px and smaller*/
@media (max-width: 512px) {
	.product-container{width: 98%;}
}