product1.css

 
#products-container{
    display: flex;
}
label{
    font-weight: bold;
    margin-left:30px;
}

.filter{
    width: 200px;
    /* background-color: rgb(127, 125, 125); */
    background-color: white;
}

select{
    width: 200px;
    margin-left : 30px;
    margin-top: 10px;
    padding:10px;
    margin-bottom: 40px;
}

*{
    margin:0px;
}
h1{
    text-align: center;
    font-size: 50px;
}
input{
    height:40px;
    width:500px;
    font-size: 30px;
}
.container{
    /* border: 1px solid green; */
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap:20px;
    margin:auto;
    width:70%;
    margin-bottom: 20px;
}
.container>div>img{
   width:90%;
   height:60%;
}


.container>div{
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
}

.container>div>h3{
    text-transform: uppercase;
    font-size: 20px;
    margin:5px 10px;
}
.container>div>h4{
     margin:5px 10px;
}
.container>div>button{
    background-color: rgb(138, 27, 150);
    color:white;
    width:200px;
     border-radius: 10px;
     text-align: center;
     font-size: 20px;
     cursor:pointer;
     border:none;
     padding:5px;
     margin:5px 10px;
 }
  
.container>div>button:hover{
    background-color: teal;
}
 @media  all and (min-width:701px) and (max-width:1000px) {
    .container{
      grid-template-columns: repeat(2,1fr);
    }
    .container>div{
       margin:auto;
    }
}
@media screen and (min-width:100px) and (max-width:700px) {
 .container{
     grid-template-columns: repeat(1,1fr);
 }
}