.documents-block {}

.documents-block .doc__upper {
    background: var(--card);
    border-radius: 10px 10px 0 0;
    padding: clamp(0.938rem, 0.701rem + 1.18vw, 1.875rem);
    display: flex;
    gap: clamp(0.625rem, 0.468rem + 0.79vw, 1.25rem);
    transition: var(--transition);
    height: 100%;
}

.documents-block .doc__item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.documents-block .doc__holder.hidden {
    display: none;
}

.documents-block #more {
    margin: 0 auto;
    margin-top: clamp(1.25rem, 0.935rem + 1.57vw, 2.5rem);
    max-width: 169px;
    height: 50px;
}


.documents-block .doc__lower {
    border: 1px solid var(--bg-dark);
    border-radius: 0 0 10px 10px;
    padding: 15px clamp(0.938rem, 0.701rem + 1.18vw, 1.875rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.documents-block .type__icon {
    width: 40px;
    height: 40px;
    background: var(--primary);
    text-align: center;
    color: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    flex-shrink: 0;
    transition: var(--transition);
}

.documents-block .doc__info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.documents-block .doc__name {
    transition: var(--transition);
}

.documents-block .doc__descr {
    color: var(--main-text);
    transition: var(--transition);
    overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 3; /* number of lines to show */
           line-clamp: 3;
   -webkit-box-orient: vertical;
}

.documents-block .doc__link {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
}

.documents-block .doc__date,
.documents-block .doc__term {
    color: var(--main-text);
}

@media(any-hover:hover) {
    .documents-block .doc__item:hover .doc__upper {
        background: var(--primary);
    }

    .documents-block .doc__item:hover .type__icon {
        color: var(--primary);
        background: var(--card);
    }

    .documents-block .doc__item:hover .doc__descr,
    .documents-block .doc__item:hover .doc__name {
        color: var(--card);
    }
}