.card3 {
    background: #ffffff;
    border: 0px solid #e5e7eb;
    border-radius: 24px;
    padding: 10px 24px;
    transition: .18s ease;
    font-size: 13px;
    box-shadow: 3px 3px 10px rgba(16,24,40,.06);
}

.card3-narrow {
    display: block;
    min-height: 200px;
    padding: 18px;
    border-radius: 16px;
    background: var(--color-bg-0);
    color: inherit;
    text-decoration: none;
    transition: .15s ease;
}
.card3-narrow:hover {
    box-shadow: 0 8px 24px rgba(16, 24, 40, .08);
    transform: translateY(-2px);
}
.card3-narrow__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    font-size: var(--text-xxs);
    font-weight: var(--weight-sm);
    color:var(--color-muted);
    letter-spacing: var(--space-4)
}
.card3-narrow__icon {
    display: none;
}
.card3-narrow__title {
    margin-bottom: 10px;
    font-size: var(--text-sm);
    font-weight: var(--weight-md);
    color: var(--color-lb3);
}
.card3-narrow__description {
    font-size:var(--text-xs);
    line-height: 1.35;
    color:var(--color-muted);
}

.card5 {

position: relative;
overflow: hidden;

height: auto;
min-height: 0;

width: 100%;
aspect-ratio: 1 / 1;
background: var(--gradient-ww);
/*background: linear-gradient(135deg, #d9c59d 0%, #ec9a1f 48%, #765f21 100%);*/
border: 1 solid #e5e7eb;
border-radius: 10px;
padding: 10px 14px;
transition: .18s ease;
font-size: 13px;
box-shadow: 3px   3px 10px rgba(16,24,40,.06);
}


.card-tag {
    position: relative;
    overflow: hidden;
}

.card-tag:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    clip-path: polygon(100% 0, 0 0, 100% 100%);

}

.card-tag.status-exceptional::before {
    background: /* #22aac5*/  #14b8a6;
}
/*{{---пока не внедрен, нужен слой, позволяющий понять, хорошо или плохо высокое значение---}}*/

.card-tag.status-done::before {
    background: var(--color-primary-g);
}
.card-tag.status-needs-control::before {
    background: var(--color-primary-r);
}
.card-tag.status-overdue::before {
    background: var(--color-back-2);
}
.card-tag.status-not-done::before {
    background: var(--color-back-2);
}
.card-tag.status-urgent::before {
    background: var(--color-primary-o);
}


/*--------------------Steps card----------------------------*/

.steps-1 {
    display: grid;
    gap: 16px;
    margin-top: 36px;
    max-width: 640px;
}

.steps-1 div {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    border: 0px solid var(--color-border-soft);
    border-radius: var(--radius-button);
    background: var(--color-card);
}

.steps-1 span {
    display: inline-flex;
    flex: 0 0 34px;
    width: 34px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-card);
    color:var(--color-focus);;
    font-size: var(--text-lg);
    font-weight: var(--weight-sm);
}

.steps-1 p {
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-sm);
    line-height: 1.45;
}