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

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

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

.product-image{
width: 100%;}

.product-info{
width: 100%;}

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

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

.reviews{
width: 100%;
margin: auto;
padding: 10px;
}

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

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

@media only screen and (min-width: 600px) and (max-width: 991px) {

    .container{
        width:90%;
    }

    .product-image{
        float:left;
        width: 30%;
        
    }
    .product-info{
        float:right;
        width: 65%;
    }

    .reviews{
        margin-top: 25%;
    }
    
    .reviews h2{
        text-align: center;
    }
     .reviews .review{
        text-align: center;
    }
    
}

@media only screen and (min-width: 992px){

    .container{
        max-width: 1000px;
    }

    .review{
        display: inline-block;
        width: 40%;
    }

}