.product {
	display: flex;
	justify-content: center;
	align-items: center;
}

.product-box {
	width: 50%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

#frames, .frame {
	list-style: none;
	list-style-type: none;
	margin: 20px;
	padding: 20px;
	text-align: center;
	max-width: 600px;
}

#frames {
	margin: 5% 0;
	width: 100%;
}

.frame {
	display: inline-block;
	padding: 3.5%;
	border-width: 15px;
	border-style: solid;
	border-color: #2F2D2D #434040 #4F4C4C #434040;
	background: #f5f5f5;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E5E4DF), to(#CDCDC6));
	background-image: -webkit-linear-gradient(#E5E4DF, #CDCDC6);
	background-image: -moz-linear-gradient(#E5E4DF, #CDCDC6);
	background-image: -o-linear-gradient(#E5E4DF, #CDCDC6);
	background-image: linear-gradient(#E5E4DF, #CDCDC6);
	box-shadow: inset 0 2px 5px rgba(0,0,0,.6),0 5px 2px rgba(0,0,0,.1), 0 10px 20px rgba(0,0,0,.8);
	position: relative;
	overflow: hidden;
}

.frame::before {
	content: "";
	position: absolute;
	top: -175px;
	right: -20%;
	width: 400px;
	height: 400px;
	transform: rotateZ(-40deg);
	-webkit-transform: rotateZ(-40deg);
	-moz-transform: rotateZ(-40deg);
	-o-transform: rotateZ(-40deg);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,.4)), to(rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0));
	background-image: -o-linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0));
	background-image: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0));
}

.frame img {
	border-width: 2px;
	border-style: solid;
	border-color: #BBBAB4 #C7C7BF #E5E4DF #C7C7BF;
	box-shadow:  0 -1px 1px rgba(0,0,0,.1), 0 1px 1px 1px rgba(255,255,255,.7);
}

.product-info-box {
	border: 1px solid black;
	border-radius: 6px;
	overflow: hidden;
	margin: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 25%;
}

.product-description {
	padding: 20px;
	width: 100%;
}

.product-description h2 {
	font-size: 1.2em;
}

.checkout {
	width: 100%;
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.pricing {
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: flex-end;
	align-content: flex-end;
}

.button {
  width: 50%;
  margin: 5%;
  display: flex;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
	color: black;
}

.item-icon {
	margin: 5px;
}

@media (max-width: 800px) {
  .product {
    flex-direction: column; /* Stack the image and description on top of each other on small screens */
  }

  .product-box {
    width: 100%; /* The image should take up the full width on small screens */
  }

  #frames {
	margin: 0;
	padding: 0;
  }

  .frame {
	padding: 5px;
  }

  .product-info-box {
  	width: 80%;
  }
}