.card{
  display: inline-block;
  border: 1px solid gray;
  border-radius: 3px;
  margin:10px 10px 10px 0px;
  width:32%;
}
.card-header{
  height:12vh  ;
  overflow-y: auto;
  background-color:#a4c3f5;
  padding:10px;
  text-align: center;
}
.card-main{
  height:20vh;
  overflow-y: auto;
  background-color:#f0f4f5;
  padding:10px;
}
.card-footer{
  height:10vh;
  overflow-y: auto;
  background-color:#0a3d62;
  padding:10px;
  text-align:left;
}
.card-footer p{
  color:#fff;
  font-style: italic;
  font-size: 12px;
}
@media screen and (max-width:1500px){
  .card{
    width:45%;
  }
  .card-header{
    height:15vh;
  }
  .card-footer{
    height:15vh;
  }
}
@media screen and (max-width:1000px){
  .card{
    width:100%;
  }
  .card-footer{
    height:12vh;
}