body{
  background-color: hsl(30, 38%, 92%);
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  min-height: 100vh;
}
.whole_product{
  background-color: white;
  display: flex;
  width: 700px;
  max-width: 90%;
  margin: 0 auto;
  border-radius: 20px;
  border: 1px solid none;
  overflow: hidden;
}
.pic{
  width: 80%;
}
img{
  width: 100%;
  object-fit: cover;
  min-height: 100%;
  margin: 0;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  display: block;
}
.info{
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: left;
  padding: 30px;
  justify-content: center;
  box-sizing: border-box;
}
.price{
  display: flex;
  gap: 5vh;
  align-items: center;
}
.productname{
  font-size: 32px;
  font-weight: bold;
  margin: 0 0 20px 0;
  line-height: 1;
  max-width: 100%;
}
@media(max-width:750px){
.whole_product{
  width: 500px;
  flex-direction: column;
  margin: 20px auto;
  padding-bottom:5vh ;
  justify-content: center;
  align-items: center;
  }
.pic img{
border-top-right-radius:20px ;
border-bottom-left-radius: 0px;
height: 350px;
object-fit: cover;
}
.info button{
  width: 55vh !important;
  height: 9vh;
}
.productname b{
  font-size: larger ;
}
.pic, .info{
  width: 100%;
}
.info{
  padding: 20px;
}
.productname{
  width: 1000px;
  margin-left: -130px !important;
}
.price{
  padding-bottom: 20px;
  margin-left: -240px;
}
.topname{
  margin-left: -310px !important;
}
.infotext{
  font-size: larger !important;
  color:  hsl(228, 12%, 48%)
}
}