* {
    box-sizing: border-box;
}

.wrap {

}

    .wrap > * {
        display: block;
        margin: 0 auto;
    }

.read-more {
    position: relative;
    text-decoration: none;
    cursor: text;
}

    .read-more .trigger {
        display: block;
        position: absolute;
        bottom: 0;
        cursor: pointer;
        color: #2980b9;
        font-weight: bold;
    }

    .read-more .content {
        position: relative;
        overflow: hidden;
        max-height: 100vh;
        transition: max-height 500ms ease;
    }

        .read-more .content::before {
            content: "";
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(40, 40, 40) 50%, rgb(40, 40, 40) 100%);
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 70px;
            transition: opactiy 500ms ease, visibility 500ms ease;
        }

    .read-more.expanded .content {
        max-height: 100%;
    }

        .read-more.expanded .content::before,
        .read-more.expanded .trigger {
            opacity: 0;
            visibility: hidden;
        }