.flip .container {
    position : relative;
    width : 100%;
    display : flex;
    align-items : center;
    justify-content : center;
    padding : 30px;  
    flex-wrap: wrap;
  }
  .flip .container .card {
    position: relative;
    max-width : 300px;
    height : 215px;  
    background-color : #fff;
    margin : 40px auto;
    padding : 20px 15px;
    
    display : flex;
    flex-direction : column;
    box-shadow : 0 5px 20px rgba(0,0,0,0.5);
    transition : 0.3s ease-in-out;
    border-radius : 15px;
  }
  .flip .container .card:hover {
    height : 320px;    
  }
  
  
  .flip .container .card .image {
    position : relative;
    width : 100%;
    height : 260px;
    top : -40%;
    left: 0px;
    box-shadow : 0 5px 20px rgba(0,0,0,0.2);
    z-index : 1;
    display: flex;
    justify-content: center;
    flex-direction:column;
  }
  
  .flip .container .card .image img {
    max-width : 100%;
    border-radius : 15px;

  }
  
  .flip .container .card .content {
    position : relative;
    top : -145px;
    padding : 10px 10px;
    color : #111;
    text-align : center;
    visibility : hidden;
    opacity : 0;
    transition : 0.3s ease-in-out;
      
  }
  
  .flip .container .card:hover .content {
     margin-top : 30px;
     visibility : visible;
     opacity : 1;
     transition-delay: 0.2s;
     
    
  }