.letter .card
  {
    height: 450px;
    width: 100%;
    margin: 10px 0px;
  }
  .letter .card img
  {
    cursor: pointer;
  }
  .letter .details h2
  {
    font-size: 1.2rem;
  }
  .letter .details p
  {
    font-size: 1rem;
    /*color: #777;*/
    font-weight: normal;
    
  }
  .letter .modal-img
  {
    width: 100%;
  }
  .letter .modal-title
  {
    color: #162c65;
    width: 100%;
    text-align: center;
    margin: 1rem 0rem;
    font-weight:bolder;
  }
  .letter .modal-header
  {
    height: 5rem;
  }
  .letter .modal-title p
  {
    font-size: 1rem;
    /*color: #777;*/
    font-weight: normal;
  }
  .letter .close
  {
    outline: none;
  }
  .larger-card:hover .imgBx
  {
    bottom: 80px;
  }
  .larger-card .details
  {
    bottom:30px;
  }
  .larger-modal .modal-header {
    height: 6rem;
}