body{
font-family: Arial;
margin:0;
}

header{
background:black;
color:white;
padding:20px;
text-align:center;
}



.container{
width:100%;
margin:auto;
padding: 23px;

}



.product {
  display: flex;
  flex-direction: column;
  gap: 16px;
}




.product-image{
width:100%;
}

.product-info{
width:100%;
}

.product-image img{
width:100%;
}

button{
padding:10px 20px;
font-size:16px;
}

.reviews{
width:100%;
margin:auto;
padding:20px;
box-sizing: border-box;
}

.review{
border:1px solid #ccc;
padding:15px;
margin:10px 0;
}

footer{
background:black;
color:white;
text-align:center;
padding:15px;
margin-top:40px;
}

/*Tablet*/
@media (min-width: 600px) and (max-width: 991px) {
  .container {
    max-width: 900px;
  }

  .product {
    
    flex-direction: row; 
  }

  .product-image,
  .product-info {
    flex: 1;
  }

  .reviews {
    max-width: 900px;
  }
}

/*PC*/
@media (min-width: 992px) {
  .container {
    max-width: 1000px;
  }

  .reviews {
    gap: 23px; 
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1fr 1fr;
   
    
    
  }

  .review {
   
    margin: 0;
    
  }
}