.clampableVar {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
  transition: all .3s ease;
  text-align: left;
}

@media (hover: hover) {
  .clampableVar:hover {
    -webkit-line-clamp: unset;
    overflow: visible;
    white-space: normal;
  }
}

.clampableVar.expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
  white-space: normal;
}



.clampableVar2 {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
  transition: all .3s ease;
  text-align: left;
}

@media (hover: hover) {
  .clampableVar2:hover {
    -webkit-line-clamp: unset;
    overflow: visible;
    white-space: normal;
  }
}

.clampableVar2.expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
  white-space: normal;
}


.clampableVar3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
  transition: all .3s ease;
  text-align: left;
}

@media (hover: hover) {
  .clampableVar3:hover {
    -webkit-line-clamp: unset;
    overflow: visible;
    white-space: normal;
  }
}

.clampableVar3.expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
  white-space: normal;
}