.project-card {
    display:        flex;
    align-items:    stretch;
    gap:            24px;
    height:         200px;
    padding-right:  24px;
    background:     #ffffff;
    border:         1px solid #f7f7f7;
    border-radius:  16px;
    min-width:      0;
}

.project-card__image {
    flex:          none;
    width:         157px;
    overflow:      hidden;
    border-radius: 16px 0 0 16px;
}

.project-card__image img {
    display:     block;
    width:       100%;
    height:      100%;
    object-fit:  cover;
}

.project-card__body {
    flex:            1 1 0;
    min-width:       0;
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    padding:         16px 0;
}

.project-card__title {
    margin:      0;
    font-size:   16px;
    font-weight: 600;
    line-height: 1.4;
    color:       #000000;
    display:         -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow:    hidden;
}

.project-card__text {
    margin:      0;
    font-size:   14px;
    line-height: 1.4;
    color:       rgba(0, 0, 0, .5);
    display:         -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow:    hidden;
}

.project-card__chips {
    display: flex;
    gap:     10px;
}

.project-card__chip {
    position:        relative;
    flex:            1 1 0;
    min-width:       0;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             2px;
    padding:         8px;
    background:      #f8f8f8;
    border-radius:   5px;
}

.project-card__chip:hover::after {
    content:        attr(data-tooltip);
    position:       absolute;
    left:           50%;
    top:            100%;
    transform:      translateX(-50%);
    margin-top:     6px;
    padding:        6px 10px;
    background:     #000000;
    color:          #ffffff;
    font-size:      12px;
    font-weight:    400;
    line-height:    1.4;
    white-space:    nowrap;
    text-align:     center;
    border-radius:  4px;
    z-index:        5;
    pointer-events: none;
}

.project-card__chip-label {
    display:     flex;
    align-items: center;
    gap:         4px;
    font-size:   12px;
    line-height: 1.4;
    color:       rgba(0, 0, 0, .5);
    white-space: nowrap;
}

.project-card__chip-label svg { flex: none; width: 12px; height: 12px; }

.project-card__chip-value {
    font-size:      14px;
    font-weight:    500;
    line-height:    1.4;
    color:          #000000;
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
}

@media (max-width: 1024px) {
}

@media (max-width: 767px) {
    .project-card {
        flex-direction: column;
        align-items:    stretch;
        height:         auto;
        gap:            0;
        padding-right:  0;
    }

    .project-card__image { width: 100%; height: 260px; border-radius: 16px 16px 0 0; }

    .project-card__body {
        padding: 12px 16px;
        gap:     12px;
    }
}