.main-post-box-wrapper{
    background: linear-gradient(to top, var(--white_color) 0, var(--gray_color) 25%);
    /*background-color: var(--black-10);*/
    border-radius: 24px;
    transition: all .3s ease-in-out;
}
.main-post-box-wrapper:hover{
    background: var(--white_color);
    box-shadow: 0 20px 20px 0 var(--black-5);
}
.main-post-box{
    position: relative;
    background-color: var(--white_color);
    border-radius: 24px;
    padding: 8px;
}
.main-post-box .post-img{
    margin-bottom: 16px;
    display: block;
}
.main-post-box .post-img img{
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
    margin: 0 auto;
}
.main-post-box .post-name{
    line-height: 23px;
    font-size: 16px;
    font-weight: 500;
    color: var(--black_color);
    padding: 0 8px 4px;

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    align-content: center;
}
.main-post-box .summary{
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: var(--black-70);
    padding: 0 8px;
    margin-bottom: 20px;

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    align-content: center;
}
.beauty .main-post-box .summary{
    font-size: 16px;
    margin-bottom: 10px;
}
.main-post-box-wrapper .info{
    padding: 8px;
    display: flex;
    /*align-items: center;*/
    justify-content: space-between;
    gap: 8px;
}
.main-post-box-wrapper .date{
    display: flex;
    align-items: center;
    gap: 16px;
    height: 56px;
    flex-grow: 1;
}
.main-post-box-wrapper .date .icon{
    width: 40px;
    height: 40px;
    background-color: var(--secondary-5);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-post-box-wrapper .date svg{
    width: 18px;
    height: 18px;
}
.main-post-box-wrapper .date i{
    color: var(--dark_secondary_color);
}
.main-post-box-wrapper .date svg path{
    stroke: var(--dark_secondary_color);
}
.main-post-box-wrapper .date .text{
    display: flex;
    flex-direction: column;
    width: calc(100% - 56px);
}
.main-post-box-wrapper .date span{
    font-size: 14px;
    font-weight: 400;
    color: var(--black-70);
}
.main-post-box-wrapper .date b{
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
}
.main-post-box-wrapper .info .btn{
    min-width: 125px;
    max-width: 50%;
    height: auto;
}

.main-post-box-wrapper.no-date .info .btn{
    width: 100%;
    max-width: 100%;
}

.main-post-box-wrapper.kala {
    background: var(--white_color);
    border: 1px solid var(--black-10);
}
.main-post-box-wrapper.kala .date {
    border: 1px solid var(--black-10);
    border-radius: 100px;
    padding: 0 16px;
    gap: 8px;
}
.main-post-box-wrapper.kala .date .icon{
    background-color: transparent;
    width: auto;
}

.pooshan-post.main-post-box-wrapper{
    background: transparent;
    margin-top: 9px;
    position: relative;
}

.pooshan-post.main-post-box-wrapper .shape-container{
    filter: url(#smooth-join);
    width: 100%;
    height: calc(100% - 32px);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.pooshan-post.main-post-box-wrapper .shape-container .rect{
    background-color: var(--white_color);
    position: absolute;
}
.pooshan-post.main-post-box-wrapper .shape-container .rect1{
    width: 56px;
    height: 20px;
    border-radius: 3px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.pooshan-post.main-post-box-wrapper .shape-container .rect2{
    width: 100%;
    height: calc(100% - 20px);
    border-radius:40px 40px 24px 24px;
    left: 0;
    top: 10px;
}
.pooshan-post.main-post-box-wrapper.show-hook:before{
    content:"";
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 13px;
    height: 17px;
    background-color: var(--black-20);
    mask-image: url("../img/hook.svg");
}
.pooshan-post.main-post-box-wrapper .info{
    background-color: var(--white_color);
    margin: 0 8px;
    border: 1px solid #EDEDED;
    border-radius: 16px;
}