article {




    max-height: 270px;
    overflow: hidden;
    transition: max-height 1s;
    text-align: justify;
    margin-top: 20px;
}


article.open {
    max-height: fit-content;
}

button#read-more {
    height: 30px;
    width: calc(100% - 16px);
    border: none;
    left: 0;
    right: 0;
    margin: 0 auto;
    position:relative;
    color:#000;
    z-index: 22;
}

button#read-more:hover {
    cursor: pointer;
    background: #1e1d25;
    color:#fff;
    z-index: 55;
}
.position-read-more{
    position: relative;
    height: 50px;
    margin-top: -15px;
    display: flex;
    align-items: end;
    justify-content: center;

}
.position-read-more:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background-image: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0.51) 55%);


    /* z-index: -2;*/
}


/**readmore hootels*/


.read-more-target,
.read-more-trigger_opened {
    display: none;
}

.read-more-state:checked ~ .read-more-trigger_closed {
    display: none;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target,
.read-more-state:checked ~ .read-more-trigger_opened {
    display: block;
}
label.read-more-trigger_closed,label.read-more-trigger_opened{
    height: 30px;
    width: calc(100% - 16px);
    border: none;
    left: 0;
    right: 0;
    margin: 0 auto;
    position: relative;
    color: #000;
    z-index: 22;
    background: #eee;
    line-height: 29px;
    text-align: center;
}
label.read-more-trigger_closed:hover,label.read-more-trigger_opened:hover{
    background: #000;
    color:#fff
}