Fade out the bottom of overly-long teaser paragraphs

• fade to white in last 10px css gradient overlay
• gradient overlay over a paragraph
• weighted gradient css
• responsive style based on height of element

It’s not pretty but i’m doing this.

Well actually didn’t find a way to do it based on height, but i have a pretty good idea of how my heights change at different breakpoints, so did it conditionally that way.

This worked pretty nicely (in Firefox) but had to abandon it because in Chrome it turned the whole text into a black block.

@include media-breakpoint-down(mg) {
  .card-text .article__body {
    max-height: 105px;
    overflow: clip;
    margin-bottom: 0;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(black, 10%, white);
    background-position: bottom;
    background-color: black;
    background-repeat: no-repeat;
    background-size: 100% $spacer;
    p:last-child {
      padding-bottom: $spacer;
    }
  }
}

Hmmmm maybe masking is the way to go.