.blog-list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);     
    gap: 20px;      
    margin: 15px 0 30px;     
}
.blog-card{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid #E7E9EA;
    transition: .3s box-shadow;
    background-color: #fff;
    flex-direction: column;
    gap:7px;
}
.blog-card:hover{
    box-shadow: 0px 6px 8px 2px #7075897e;
}
.blog-preview_text{
    width: 100%;
    padding: 2px 15px 30px;
}
.blog-preview_text .blog-preview_title{
    width: 100%;
    padding: 0 0 8px;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 20px;
    color: #15153C;
}
.blog-preview_text .blog-preview_description{
    margin-top: 5px;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #707589;
}
.blog-card .prev-blog_image{
    height: 13rem;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -1px -2px 0;
}
.blog-card .prev-blog_image:before{
    position: absolute;
    content: "";
    width: 4rem;
    height: 300%;
    background-color: #5985ee0d;
    left:0;
    transform: rotate(45deg);
    transform: translateX(-300%) rotate(45deg);
    transition: .7s left;
}
.blog-card:hover .prev-blog_image:before{
    transform: translateX(900%) rotate(45deg);
    transition: transform .7s;
}
.blog-card .prev-blog_image.no-prev_image{
    border: 1px solid #E7E9EA;
    margin: -1px -1px 0;
    padding: 30px;
}
.blog__table_of_contents{
    margin: 15px 0 45px;
}
.blog__table_of_contents ol{
    margin-left: 15px;
}
.blog-table{
    margin-bottom: 15px;
    overflow-x: auto;
}
.blog-table td{
    border: 1px solid;
    padding: 5px 15px;
}
.blog-preview_category{
    margin-top: 5px;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #707589;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.blog-detail-image{
    margin: 25px 0px 50px;
    max-height: 350px;
    overflow: hidden;
    max-width: 1050px;    
}
.blog-detail-image img{
    width: 100%;
}
.blog-top-info{
    display: flex;
    column-gap: 25px;    
    row-gap: 10px;
    flex-wrap: wrap;
}
.blog-detail-separator:before {
    content: '|';
}
.blog-top-info,
.blog-detail-separator,
.blog-detail-date{
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #707589;
}

.blog-preview_date{
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #707589;
}
article .blog-content h2, 
article .blog-content h3, 
article .blog-content h4, 
article .blog-content .h5, 
article .blog-content h6{
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.blog-content{
    margin-left: 15px;
    margin-right: 15px;
}
.heading_table_of_content{
    font-size: 24px;
}
@media (max-width:768px){
    .blog-list{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width:425px){
    .blog-list{
        grid-template-columns: 1fr;
    }
    .blog-top-info{
        flex-direction: column;
        row-gap: 3px;
    }
    .blog-detail-separator {
        display: none;
    }
}