// Firefox and Edge
@supports not (-webkit-line-clamp: 1) {
    .xs-line-clamp-2,
    .xs-line-clamp-3 {
      display: block;
      overflow: hidden;
      position: relative;
      $height: 2.4em;
  
      &.xs-line-height-7,
      &.sm-line-height-7 {
        $height: 2.6em;
        height: $height;
      }
  
      &.xs-line-height-8,
      &.sm-line-height-8 {
        $height: 2.6em;
        height: $height;
      }
  
      &:after {
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
        bottom: 0;
        content: "";
        height: $height/2;
        right: 0;
        position: absolute;
        text-align: right;
        width: 30%;
      }
    }
  
    .xs-line-clamp-3 {
        $height: 2.4em;
  
        &.xs-line-height-7,
        &.sm-line-height-7 {
          $height: 3.6em;
          height: $height;
        }
  
        &.xs-line-height-8,
        &.sm-line-height-8 {
          $height: 4.6em;
          height: $height;

          &.sm-text-7 {

            @media (min-width: $sm) {
              $height: 4.3em;
              height: $height;
            }
          }
        }
  
        &:after {
          height: $height/3;
      }
    }
  }
  
  .xs-line-clamp-2 {
    &.xs-line-height-8 {
      min-height: 4.4rem;
    }
  }