.product-list
{
	width: 1000px;
	margin: 50px auto;

	display: grid;
	grid-template-columns: repeat(4, 225px);
	grid-row-gap: 25px;
	grid-column-gap: 25px;
	justify-content: center;
}

.product-list a
{
	text-decoration: none;
	color: black;
}

.product-list #product
{
	border: 1px solid;
	border-color: lightgray;
	border-radius: 5px;
	text-align: center;
	display: grid;
	grid-template-rows: 150px 200px;
	background: white;
	transition: border-color 0.2s ease;
}

.product-list #product:hover
{
	border-color: #54d100;
	transition: border-color 0.2s ease;
}

#product #product-image
{
	align-self: flex-start;
	width: 90%;
	height: 90%;
	margin: 10px auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

#product #product-image img
{
	max-width: 90%;
	max-height: 90%;
}

#product #product-info
{
	display: grid;
	grid-template-rows: 100px 50px 50px;
}

#product #product-info p
{
	margin: 0 10px;
	text-align: left;
	font-weight: 800;
}

#product #product-info #cart
{
	background: rgb(200, 255, 200);
	border-radius: 5px;
	transition: background 0.2s;
	margin: 5px 5px;
	height: 40px;
}

#product #product-info #cart:hover
{
	background: rgb(160, 235, 160);
	transition: background 0.2s;
}

#product #product-info #cart p
{
	text-align: center;
	line-height: 40px;
}

@media screen and (max-width: 1000px)
{
	.product-list
	{
		width: 100%;
		grid-template-columns: repeat(3, 225px);
	}
} 

@media screen and (max-width: 775px)
{
	.product-list
	{
		grid-template-columns: repeat(2, 225px);
	}
}

@media screen and (max-width: 450px)
{
	.product-list
	{
		grid-template-columns: 225px;
	}
}