.blog-post {
  padding: 10px;
  margin: .5rem 0 1rem 0;
  background-color: #fff;
  display: flex;
  flex-direction: row;

  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);

  .post-thumbnail {
    position: relative;
    width: 20%;
    background-position: center center;
    background-repeat: no-repeat;
    @media only screen and (max-width: 475px) {
      width: 30%
    }
  }
  .post-thumbnail:after {
    display: block;
  }
  .post-content {
    width: 70%;
    height: 100%;
    margin-left: 30px;

    @media only screen and (max-width: 600px) {
      margin-left: 10px;
    }
    h3 {
      color: black !important;
      font-size: 36px;
      overflow: hidden;
      max-height: 40px;
      line-height: 40px;
      margin: 0px;

      @media only screen and (max-width: 600px) {
        font-size: 28px;
        line-height: 32px;
        max-height: 32px;
      }
    }
    p {
      color: black !important;
      font-size: 14px;
      line-height: 24px;
      max-height: 48px;

      overflow: hidden;
      margin: 0px;

      @media only screen and (max-width: 600px) {
        font-size: 12px;
        line-height: 20px;
        max-height: 60px;

      }
    }
    .meta-data {
      @media only screen and (max-width: 600px) {
        display: none;
      }
    }
  }
}

a {
  text-decoration: none !important;
}