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

header{
background: rgb(0, 0, 0);
color: white;
padding: 20px;
text-align: center;
}

.container{
width: 90%;
margin: auto;
padding: 20px 0;
}

.product-image{
float: none;
width: 100%;
margin-bottom: 20px;
}

.product-info{
float: none;
width: 100%;
}

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

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

.reviews{
width: 90%;
margin: auto;
padding: 20px;
}

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

footer{
background: rgb(0, 0, 0);
color: white;
text-align: center;
padding: 40px;
margin-top: 40px;
clear: both;
}

/* Medium screens */
@media (min-width: 600px) {
  .container {
    width: 80%; 
  }
  .product-image {
    float: left; 
    width: 48%;
  }
  .product-info {
    float: right;
    width: 48%;
  }
  button {
    width: auto; 
  }
  
.review {
    float: none;
    width: 100%;
  }

  .container::after {
    content: "";
    display: table;
    clear: both;
  }
}

/* Large screens */
@media (min-width: 992px) {
  .container, .reviews {
    max-width: 1000px; 
    width: 1000px;
  }

  .product-image {
    width: 500px;
  }

  .product-info {
    width: 450px;
  }

  .review {
    float: left;
    width: 46%; 
    margin: 1%; 
    box-sizing: border-box;
  }

  .reviews::after {
    content: "";
    display: table;
    clear: both;
  }
}