.ns-expandable {
    position: relative;
    /* righe visibili da chiuso: il punto d'uso la ridefinisce inline */
    --ns-expandable-lines: 3;
    /* la sfumatura deve sfumare verso lo sfondo su cui il riquadro poggia */
    --ns-expandable-fade: #fff;
}

.ns-expandable-content {
    /* 1.5em e' l'interlinea di base di Bootstrap 5: tre righe fanno 4.5em */
    max-height: calc(var(--ns-expandable-lines) * 1.5em);
    overflow: hidden;
    transition: max-height .35s ease;
}

/* lo spazio in fondo serve in tutti e due gli stati: la freccia resta sul bordo inferiore anche da aperto,
   e senza questo si sovrapporrebbe all'ultima riga del testo */
.ns-expandable.ns-expandable-collapsed .ns-expandable-content,
.ns-expandable.ns-expandable-expanded .ns-expandable-content {
    padding-bottom: 2rem;
}

.ns-expandable.ns-expandable-expanded .ns-expandable-content {
    max-height: none;
}

/* la sfumatura compare solo quando il testo e' davvero troncato, non quando ci sta tutto */
.ns-expandable.ns-expandable-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--ns-expandable-fade));
    pointer-events: none;
}

/* nessuna cornice: solo la freccia, centrata sul bordo inferiore */
.ns-expandable-toggle {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1;
}

/* inline-block obbligatorio: transform non ha effetto sugli elementi inline, e l'<i> di Font Awesome lo è */
.ns-expandable-toggle i {
    display: inline-block;
    transition: transform .3s ease;
}

.ns-expandable.ns-expandable-expanded .ns-expandable-toggle i {
    transform: rotate(180deg);
}