.collapsible {
    overflow: hidden;
    position: relative;
}

.collapsible::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2.5rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}
.collapsible,
.collapsible::after {
    transition: height .3s ease-in-out;
}

.collapsible:not(.collapsed)::after {
    height: 0;
}

.collapsible-toggle {
    text-transform: uppercase;
    font-weight: 700;
}

.collapsible + .collapsible-toggle {
    margin-top: 0.625em;
}

:not(.collapsible) + .collapsible-toggle {
    display: none;
}

.collapsible.collapsed {
    height: calc(var(--collapsible-max-lines-number) * var(--line-height) * 1em);
}

.collapsible.expanded {
    height: calc(var(--collapsible-height-expanded) * 1px);
}

.collapsible.collapsed + .collapsible-toggle > .collapsible-toggle-title-expand,
.collapsible.expanded + .collapsible-toggle > .collapsible-toggle-title-collapse {
    display: block;
}

.collapsible:not(.collapsed):not(.expanded) + .collapsible-toggle,
.collapsible.collapsed + .collapsible-toggle > .collapsible-toggle-title-collapse,
.collapsible.expanded + .collapsible-toggle > .collapsible-toggle-title-expand {
    display: none;
}