input {
  bottom: 0;
  clip: rect(0);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

.boxcontent {
  /* height: 3lh; */
  max-height: 140lh;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  /* transition: height 0.5s; */
  transition: max-height 0.5s;
}

input:checked ~ .boxcontent {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  max-height: 60lh;
  /* height: calc-size(auto); */
}

input:not(:checked) ~ label::after {
  content: "Read More";
}

input:checked ~ label:after {
  content: "Read Less";
}

label {
  cursor: pointer;
  margin-top: 1lh;
  display: inline-block;
  background-color:gray;
  color: white;
  border-radius: 8px;
}
