Fade out the bottom of overly-long teaser paragraphs

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.