@layer pages {
.documents-page {
    color: var(--color-brand-dark);
}

.documents-page__container {
    padding-block: 36px 130px;
}

.documents-page .breadcrumbs {
    margin-bottom: 30px;
}

.documents-page__title {
    margin: 0 0 27px;
}

.documents-page__panel {
    display: grid;
    min-height: 420px;
    grid-template-columns: 263px minmax(0, 1fr);
    gap: 18px;
    padding: 20px;
    border-radius: var(--radius-panel);
    background: var(--color-section-muted);
}

.documents-library {
    min-width: 0;
}

.documents-library__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.document-card {
    display: flex;
    min-width: 0;
    min-height: 165px;
    flex-direction: column;
    padding: 19px 19px 15px;
    border-radius: var(--radius-panel);
    background: var(--color-surface);
}

.document-card__title {
    margin: 0;
    font-family: var(--font-family-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.document-card__footer {
    display: flex;
    min-width: 0;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.document-card__meta {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #727272;
    font-family: var(--font-family-primary);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
}

.document-card__separator {
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-brand-orange);
}

.document-card__download {
    display: grid;
    flex: 0 0 auto;
    justify-items: center;
    gap: 5px;
    color: var(--color-brand-orange);
    font-family: var(--font-family-primary);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.14;
}

.document-card__file-icon {
    width: auto;
    height: 30px;
}

.documents-library__empty {
    margin: 0;
    font-family: var(--font-family-primary);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.22;
}

@media (max-width: 959px) {
    .documents-library__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .documents-page__container {
        padding-block: 28px 80px;
    }

    .documents-page__panel {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        padding: 10px;
    }
}

@media (max-width: 560px) {
    .documents-library__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

}