.list{
  width: 90%;
  margin: auto;
  margin-top: 30px;
  border: 2px solid red;
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 10px;
  text-align: center;
}
.list div{
  /* width: 0%; */
  border: 2px solid red;

}
.list img{    
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  width: 100%;
}

    /* Write all necessery css here  */

    .nav{
      /* border: 2px solid red; */
      /* display: flex; */
      /* justify-content: space-around; */
      /* align-items: center; */
      /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
    }
    #filter{
     display: block;
     border-style: dashed;
     margin: auto;
     font-size: 20px;
     margin-top: 30px;
     margin-bottom: 30px;

    }
    #product-container{
      /* border: 2px solid red; */
      display: grid;
      grid-template-columns:20% 20% 20% 20% ;
      grid-gap: 20px;
      /* margin: auto; */
      justify-content: center;
    }
    #product-container>div{
      /* border: 2px solid red; */
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      padding: 10px;
    }
    #product-container>div>img{
      height: 200px;
      width: 100%;

    }
    #product-container>div>button{
       display: block;
       margin: auto;
       background-color: rgb(81, 201, 245);
       color: white;
       padding: 5px;
       border: none;
       border-radius: 3px;

    }


    *{
      text-align: center;
    }