/////////////////////////// Truncated Content Blocks ///////////////////////////

.truncate {
  position: relative;
  margin-bottom: 3.5rem;

  .truncate-content {
    overflow: hidden;
    max-height: 9999px;
    transition: max-height .4s;

    &.closed {
      min-height: 250px;
      max-height: 25vh;
    }
  }

  .truncate-bottom {
    position: absolute;
    bottom: -30px;
    width: 100%;
    z-index: 100;
    height: auto;
  }

  a.truncate-toggle {
    display: block;
    width: 100px;
    margin: 0 auto;
    color: $article-text;
    background: $article-bg;
    padding: .45rem;
    text-align: center;
    font-size: .75rem;
    text-transform: uppercase;
    border-radius: $radius;
    transition: color .2s;
    &:before{
      content: "Show Less";
    }
    &:hover {
      color: $article-link;
    }
  }
  &.closed { 
    
    .truncate-bottom {
      bottom: 0;
      background-image: linear-gradient(to bottom, rgba($article-bg, 0), rgba($article-bg, 1));
      height: 100px;
    }

    a.truncate-toggle {
      margin-top: 75px;
      &:before {
        content: "Show More";
      }
    }
  }
}