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

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

/* =========================
   MOBILE FIRST
   ========================= */

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

/* Remove floats */
.product-image,
.product-info{
    width:100%;
}

/* Image above info */
.product-image img{
    width:100%;
    display:block;
    margin-bottom:20px;
}

.product-info{
    margin-bottom:20px;
}

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){

    .container{
        max-width:1000px;
        display:flex;
        gap:20px;
        align-items:flex-start;
    }

    .product-image{
        width:50%;
    }

    .product-info{
        width:50%;
    }

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

/* =========================
   DESKTOP
   ========================= */

@media (min-width:992px){

    .container{
        max-width:1000px;
    }

    .reviews{
        max-width:1000px;

        display:grid;
        grid-template-columns:1fr 1fr;
        gap:20px;
    }

    .review{
        margin:0;
    }
}