#maindiv{
    width: 80%;
    margin: auto;
}
img{
    width: 100%;
    height: 150px;
    
}
#div{
    margin: 1px solid red;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 2px;
height: 230px;

}
#container{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 30px;
   
}
#name{
    margin-top: 5px;
    margin-bottom: 5px;
    overflow: auto;
}
#h1{
    text-align: center;
}
#p{

width: 90%;
text-align: center;
margin: auto;
margin-bottom: 20px;
}
@media all and (min-width:200px) and (max-width:481px){
#container{
   
   grid-template-columns: repeat(1,1fr);
 
}
}
@media all and (min-width:481px) and (max-width:768px){
#container{
   
   grid-template-columns: repeat(2,1fr);
 
}
}

@media all and (min-width:768px) and (max-width:1024px){
#container{
   
   grid-template-columns: repeat(3,1fr);
 
}
}