.related-posts-container{
    margin:20px 0 10px;
    max-width:100%;
}

/* Common layout */
.related-post{
    display:flex;
    position:relative;
    border:1px dashed #707070;
    padding:7px;
    border-radius:5px;
}
.related-post:before{
    content:'Also Read';
    position:absolute;
    top:-16px;
    left:10px;
    background:#fff;
    padding:0 4px;
    font-weight:500;
    font-size:14px;
    color:#cb0000;
}

/* --- IMAGE VERSION ------------------------------------------------------ */
.thumb-box{
    width:140px;height:80px;
    overflow:hidden;
    border:1px solid #9e9e9e66;
    border-radius:5px;
}
.thumb-box img{
    width:100%;height:100%;
    object-fit:cover;
    transition:.5s;
}
.title-box{width:calc(100% - 140px);padding-left:10px;}

/* --- NO-IMAGE VERSION ---------------------------------------------------- */
.related-post.no-img{display:block;padding:7px 10px;}
.related-post.no-img .title-box{width:100%;padding-left:0;}
.related-post.no-img .related-post-title{line-height:26px;}

/* Shared title styling */
.related-post-title{
    font-size:18px;font-weight:600;margin:0;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden;
}
.title-box a{text-decoration:none;color:#000;}
.title-box a:hover{color:#0073e6;}

@media(max-width:480px){
    .thumb-box{width:115px;height:70px;}
    .title-box{width:calc(100% - 115px);}
    .related-post-title{font-size:16px;line-height:22px;}
}