@mixin multiLineEllipsis($lineCount: 1, $paddingBottom: 0, $lineHeight: 1, $font-size: 1em) {
    text-overflow: ellipsis;
    line-height: $lineHeight;

    overflow: hidden;
    max-height: $lineHeight * $lineCount * $font-size;
    padding-bottom: $paddingBottom;

    // thank you youtube for your precious insight
    // tested in Chrome, FF & Safari
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $lineCount;


    @if $paddingBottom > 0 {
        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - #{$paddingBottom}),
            0 calc(100% - #{$paddingBottom})
        );
    }
}