.project-list > .row > .col {
    margin-bottom: 24px;
}

.project-list .tp-post-item {
    position: relative;
    margin: 0;
}

.project-list .tp-post__thumbnail{
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.project-list .tp-post__thumbnail::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    transform-origin: center center;
    width: 200%;
    height: 0px;
    background-color: rgba(255, 255, 255, 0.3);
    pointer-events: none;
    z-index: 2;
    transition: 0.9s;
}


.project-list .tp-post-item:hover .tp-post__thumbnail::before {
    height: 100%;
    transform: translate(-50%, -50%) rotate(-45deg) scale(4);
    opacity: 0;
    transition: 0.9s;
}

.project-list .tp-post__thumbnail a{
    position: relative;
    display: block;
}

.project-list .tp-post__thumbnail a::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(34, 34, 34, 0) 37.55%, rgba(34, 34, 34, 0.8) 68.82%);
}
.project-list .tp-post__thumbnail img{
    aspect-ratio: 1/1.042;
    object-fit: cover;
    transition: ease-in-out .4s;
}
.project-list .tp-post__content{
    position: absolute;
    width: calc(100% - 60px);
    left: 30px;
    bottom: 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 20px;
}

.project-list .tp-post__content .tp-title{
    margin: 0
}

.project-list .tp-post__content .tp-title a {
    transition: ease-in-out .4s;
}

.project-list .tp-post__content .tp-title:hover a {
    color: var(--tp-primary);
}

.project-list .bp_tag {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.project-list .bp_tag_item_lb {
    display: inline-block;
}

.project-list .bp_tag_item {
    font-size: 16px;
    padding: 6px 20px;
    border-color: #fff !important;
    color: #fff !important;
    border-radius: 6px;
    background-color: transparent !important;
}

.project-list .tp-post-item:hover img {
    transform: scale(1.08);
}

.project-list .bp-result,
.project-list .bp-result-number {
    display: none;
}

@media (max-width: 767.98px) {
    .project-list .tp-post__content {
        left: 20px;
        right: 20px;
        bottom: 20px;
        width: calc(100% - 40px);
    }
}