.no-wrap {
    white-space: nowrap!important;
  }
  
  .container_card{
    height:auto;
    overflow: hidden;
  }
  
  .container_card:before,
.container_card:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 100px;
  top: 0;
  height: 100%;
  pointer-events: none; /*makes the linkes behind clickable.*/
}
  .container_card:before {
    left: 0;
    background: linear-gradient(to right, rgb(255, 255, 255), rgba(1, 0, 0, 0));
  }
  .container_card:after {
    right: 0;
    background: linear-gradient(to left, rgb(255, 255, 255), rgba(1, 0, 0, 0));
  }
  
  /* quickest, dirtiest grid possible */
  .grid_card{
    display: block;
    font-size: 0; /* if anybody knows a browser in which this doesn't work, would love to hear from you in the comments */
  }
  
  .cell {
    display: inline-block;
    font-size: 2rem; /* fix that elegant/ugly font-size: 0 hack */
    font-weight: 700;
    position: relative;
    width: 55%;

    padding: 1rem .5rem;
    text-align: center;
    cursor: pointer;
  }
  
  .cell .content {
    display: block;
    position: relative;
    bottom: .5rem;
    left: .5rem;
    right: .5rem;
    color: #555;
    background: #fff;
    box-shadow: 0 2px 10px -10px #ccc;
  }
  

  .cell.card {

    height:250;
  }
  
  .content2{
    display:none;
  }
  @media screen and (max-width: 820px){

    .cell .content {
        display: none;
    
      }

      .content2 {
        display: block;
    
      }
      

  }