.card {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
    width: 95%;
    margin: 0 auto;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 25px;
    flex: 1 0 auto;
  }

  .card h4{
    font-family: Helvetica;
    font-size: 20px;
    color: #002856;
    text-align: center;
     margin: 15px 0 10px 0;
  }

  .card img{
    width :100%;
    height: 250px;
    object-fit: cover;
    object-position: top;
  }

  .card:hover {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 71%, rgba(255, 255, 255, 0) 99%), linear-gradient(to bottom, #019875, #019875);
    transform: scale(1.02);
  }
  
  .card:hover h4{
   color: white;
  }
  
  .card:hover p{
    color: white;
   }

  .card p {
    font-size: 15px;
    color: #828282;
    text-align: center;
    padding-bottom: 15px;
    margin-bottom: 0;
  }

  .card img {
    border-radius: 8px 8px 0 0;
  }

  @media screen and (max-width: 540px) {
    .card {
      width: 300px;
    }

    .card img{
        height: 200px;
      }
  }