@media ( max-width: 600px ) {
  
      /***************  Read More **************/

      .read-more__content {
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: normal;
        height: 20em;
      }
      
      /* Safari fix, it needs to be inline for the clamp to work on safari  */
      .read-more__wrapper {
        display: inline;
      }
      
      /* So inner elements don't inherit the display inline from the wrapper. */
      /* .read-more__wrapper * {
        display: block;
      } */

      /* Link fix, so that it does not break to a new line  */
      .read-more__wrapper * a {
        display: inline;
      }
      
      .read-more__content.is-expanded {
        -webkit-line-clamp: initial;
        height: initial;
      }
      
      .expand {
        display: block;
        border: none;
        color: #0081c6;
        font-size: 16px;
        font-weight: 800;
        width: 100%;
        padding-top: 6px;
      }

      .expand:before {
        content: '';
        display: block;
        width: 100%;
        background: rgb(255,255,255);
        background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%);
        height: 60px;
        position: absolute;
        top: -60px;
        left: 0;
        z-index: 2;
    }

    .gray .expand:before {
      background: rgb(247,247,247);
      background: linear-gradient(0deg, rgba(247,247,247,1) 0%, rgba(247,247,247,0.85) 50%, rgba(247,247,247,0) 100%);;
    }

    .expand.more-button-expanded:before {
      display: none;
    }

    .button-read-more-wrapper {
      display: block;
      width: 100%;
      bottom: 0;
      text-align: left;
      position: relative;
      z-index: 1;
    }
      
}