.projects-list-item{
    width: 100%;
    max-width: 424px;
    background-color: var(--light-grey);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: 0.5s;
}
.project-item-link{
    display: block;
    height: 100%;
    border-bottom: unset !important;
    width: 100%;
}
.projects-item-wrap{
    height: 100%;
}
.project-item-top{
    height: 212px;
}
.project-item__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius);;
}
.project-item-bottom{
    padding: 20px 28px 28px 28px;
    height: calc(100% - 212px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.project-item-products{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding-bottom: 20px;
}
.project-item-products-item{
    background-color: #fff;
    border-radius: var(--border-radius);
    padding: 7px 10px;
    color: var(--light-blue);
    width: max-content;
    font-weight: bold;
}
.project-item-text {
    font-size: 16px; 
}
.project-item-name{
    font-family: var(--font-inter);
    font-size: 20px;
    font-weight: bold;
    color: var(--near-black);
    padding-bottom: 32px;
    line-height: 28px;
}
.project-item-more{
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    font-size: 20px;
    color: var(--light-blue);
    font-family: var(--font-inter);
}
.project-item-pic{
    transition: 0.5s;
}
@media screen {
    .projects-list-item:hover{
        background-color: var(--grey-hover);
    }
    .projects-list-item:hover .project-item-pic{
        transform: translateX(15px);
    }
}
@media(max-width: 1349px){
    .projects-list-item{
        max-width: 468px;
    }
}
@media(max-width: 991px){
    .projects-list-item{
        max-width: 424px;
    }
}
@media(max-width: 902px){
    .projects-list-item{
        max-width: 48%;
    }
}
@media(max-width: 655px){
    .projects-list-item{
        max-width: 100%;
    }
    .project-item-bottom{
        padding: 20px 16px 28px 16px;
    }
}
@media(max-width: 500px){
    .project-item-top{
        height: 150px;
    }
    .project-item-bottom{
        height: calc(100% - 150px);
    }
}