/*---------element----------- Accordion------------------*/
.posts-accordion h5, .posts-accordion h3 {
    color:#3a3a3a;
}
.posts-accordion h3 {
    font-size: 25px;
}
.posts-accordion p {
    margin:0px;
}

.accord-item{
    border-bottom: 5px solid #3a3a3a!important;
}
.accord-item h5{
    text-align:right;
}
/*flex*/
.accord-text {
    padding: 30px;
}
.accord-titlemeta {
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
}
.accord-titlemeta > *{
    line-height:30px;
    display: inline-block;
    vertical-align: middle;
}
/*-----------------image-----------------------*/
.accord-image-container{
    width:100%;
}
.accord-image-container img{
    width:100%;
    height:100%;
    object-fit: cover;
}

/*------mechanism--------*/
/*shows accord-excerpt*/
.posts-accordion:hover .accord-item:hover .accord-excerpt,
.posts-accordion .accord-open-default .accord-excerpt {
    height: auto;
}
.accord-excerpt,
.posts-accordion:hover .accord-excerpt {
    height: 0px;
    overflow: hidden;
    transition: height .15s;
}

/*shows image*/
.posts-accordion:hover .accord-item:hover .accord-image-container,
.posts-accordion .accord-open-default .accord-image-container {
    height: 150px;
}
.accord-item .accord-image-container,
.posts-accordion:hover .accord-image-container{
    height: 0px;
    overflow: hidden;
    transition: height .15s;
}
/*changes BG color*/
.posts-accordion:hover .accord-item:hover,
.posts-accordion .accord-open-default {
    background-color:white;
}
.accord-item,
.posts-accordion:hover .accord-item {
    background-color:#E8E8E8;
}

@media all and (min-width: 770px) {
    /*Structure (flexbox)*/
    .accord-item {
        display: flex;
        justify-content: space-between;
    }
    .accord-text {
        max-width: 70%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        flex-grow: 1;
    }
    .accord-titlemeta h3 {
        align-self: end;
    }
    .accord-excerpt {
        max-width: 60%;
    }
    /*image*/
    .accord-image-container {
        order: 3;
        width:30%;
    }
    /*------mechanism--------*/
    /*set height of image container, project item when OPEN*/
    .posts-accordion:hover .accord-item:hover,
    .posts-accordion .accord-open-default,
    .posts-accordion:hover .accord-item:hover .accord-image-container,
    .posts-accordion .accord-open-default .accord-image-container {
        height: 300px;
    }
    /*set height of image container, project item when CLOSED*/
    .accord-item,
    .posts-accordion:hover .accord-item,
    .accord-item .accord-image-container,
    .posts-accordion:hover .accord-image-container{
        height: 90px;
        overflow: hidden;
        transition: height .15s;
    }
}