style.css

body{
  margin: 0;
  font-family:sans-serif;
  background:#f2f2f2;
}
h3{
  text-align: center;
  font-size: 30px;
  margin: 0;
  padding-top: 10px;
}

a{
  text-decoration:none;
}

.gallery{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin: 50px 0;
  
}

.content{
  width: 20%;
  margin: 15px;
  box-sizing: border-box;
  float:left;
  text-align: center;
  border-radius: 20px;
  cursor: pointer;
  padding-top: 10px;
  box-shadow: 0 14px 28px rgba(0,0,0,0,25),
    0 10px 10px rgba(0,0,0,0,22);
  transition: .4s;
  background:#daceed;
}

.content:hover{
  box-shadow: 0 3px 6px rgba(0,0,0,0,16),
    0 3px 6px rgba(0,0,0,0,23);
  transform: translate(0px, -8px);
}

img{
  width:200px;
  height: 200px;
  text-align: center;
  margin: 0 auto;
  display:block;
  
}

p{
  text-align: center;
  color:#5e8ce8;
  padding-top: 0 8px;
  
  
}
h6{
  font-size: 26px;
  text-align: center;
  color: #222f3e;
  margin: 0;
  
}

span{
  font-size: 26px;
  transition: .4s;
  justigy-content: center;
  padding-top: 5px;
  align-items: center;
  list-style: none;
  margin:3px;
}

.rating{
  color: #ff9f43;
}

button{
  text-align: center;
  font-size: 24px;
  color: #272626;
  width: 100%;
  padding: 15px;
  border: 0;
  outline: none;
  cursor:pointer;
  margin-top: 5px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}



.buy{
  background-color: #F0C4B9;
}


@media(max-width: 1000px){
  .content{
    width: 45%;
  }
}

@media(max-width:750px){
  .content{
    width: 100%;
  }
}