*{
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     padding: 0%;
     margin: 0%;
     
}
body{
    width: 100%;
    height: 100%;
}
.main{
    width: 98vw;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    
}
.product{
    width: 200px;
    height: 200px;
    background-color: blanchedalmond;
    border: 2px solid black;
    margin: 10px;
    flex-shrink: 3;
}
.product img{
    width:67%;
    height:67%;
    border: 1px solid black;
    border-radius: 9px;
    position: relative;
    top: 3%;
    left: 15%;
}
.product img:hover {
    transform: scale(1.01);
}
.product button{
    background-color: #153243;
    color: #B4B8AB;
    padding: 2px;
    position: relative;
    top: 3%;
    left: 30%;
    cursor: pointer;
    font-weight: 400;
    
}
.product button:hover{
    background-color: #284B63;
    color: #F4F9E9;
    transform: scale(1.01);
}
/* making Responsive*/
@media (max-width: 789px) {
    .main{
        height: 610px;
        display: flexbox;
        flex-wrap: wrap;
        overflow: scroll;
        
    }
    .product{
     width: 141px;
    background-color: blanchedalmond;
    border: 2px solid black;

    }
    .product button{
    position: relative;
    top: 5%;
    left: 20%;
}
    
}
/* make responsive from 316px less */
@media (max-width: 316px) {

 .main{
        display: flexbox;
        flex-wrap: wrap;
         overflow: scroll;
        
    }
    .product{
    width: 128px;
    background-color: blanchedalmond;
    border: 2px solid black;

    }
    .product button{
    position: relative;
    top: 5%;
    left: 20%;
}


}