.panel-read-more {
    /* Store the line height for <p> and the number of lines to show */
    --lh: var(--leading-normal);
    --max-lines: 10;
}

.homepage-intro .panel-read-more {
    --max-lines: 14;
}

.panel-read-more .extendable  {
    position: relative;
    overflow: hidden;
}

.panel-read-more .extendable.extended  {
    /* Generate a max height base on the line height * number of lines */
    max-height: calc(var(--lh) * var(--max-lines) * 1rem);
}

.panel-read-more .extendable.extended::after  {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, transparent 20%, white);
}

.panel-read-more .read-more-btn {
    display: block;
    margin: 0 auto var(--space-8);
    border-radius: 30px;
    font-family: var(--font-cabin);
    font-weight: 400;
    font-size: 1rem;
    padding: 13px 22px 13px 43px;
    color: var(--white);
    background: url(/includes/client_public/assets/shared/read-more-btn-leaf.svg) no-repeat left 15px center var(--pink);
}

@media (min-width: 40em) {
    .panel-read-more {
        --max-lines: 4;
    }

    .homepage-intro .panel-read-more {
        --max-lines: 12;
    }
}