:root {
    --doc-card-header-fw: 400;
    --doc-card-header-fs: 36px;
    --doc-card-header-margin: 50px 20px;

    --doc-cards-padding: 0 20px;
    --doc-card-max-width: 1200px;
    --doc-card-gap: 50px;
    --doc-card-min-height: 370px;
    --doc-card-border-radius: 10px;
    --doc-card-padding: calc(2 * var(--doc-card-gap)) var(--doc-card-gap);

    --doc-card-hover-background-color: rgba(34,21,22, 0.4);
    --doc-card-logo-margin-bottom: 30px;
    --doc-card-text-fs: 20px;
    --doc-card-link-fs: 18px;
    --doc-card-text-fw: 300;
    --doc-card-text-mb: 5px;
}

.documents {
    background-color: var(--logo-card-color-4-opacity);
    border-bottom: var(--white-border);
    justify-content: center;
    flex-direction: column;
    align-items: center;
    display: flex;
    width: 100%;
}

.documents__header {
    font-family: "Poiret", Arial, sans-serif;
    font-weight: var(--doc-card-header-fw);
    margin: var(--doc-card-header-margin);
    font-size: var(--doc-card-header-fs);
    color: var(--cover-color);
    text-align: center;
}

.documents__container {
    max-width: var(--doc-card-max-width);
    margin-bottom: var(--doc-card-gap);
    padding: var(--doc-cards-padding);
    gap: var(--doc-card-gap);
    justify-content: center;
    flex-direction: row;
    align-items: center;
    display: flex;
    width: 100%;
}

.document__card {
    border-radius: var(--doc-card-border-radius);
    min-height: var(--doc-card-min-height);
    background-color: var(--white-color);
    padding: var(--doc-card-padding);
    transition: var(--transition);
    justify-content: center;
    flex-direction: column;
    text-decoration: none;
    align-items: center;
    cursor: pointer;
    display: flex;
    width: 100%;
}

.document__card:hover {
    background-color: var(--doc-card-hover-background-color);
}

.document__card_logo {
    margin-bottom: var(--doc-card-logo-margin-bottom);
}

.document__card > span {
    margin-bottom: var(--doc-card-text-mb);
    font-weight: var(--doc-card-text-fw);
    font-size: var(--doc-card-text-fs);
    color: var(--cover-color);
}

.document__card:hover > span {
    color: var(--logo-card-color-4);
}

.document__card > .download_span {
    font-weight: var(--doc-card-text-fw);
    font-size: var(--doc-card-link-fs);
    color: var(--logo-card-color-2);
    text-decoration: underline;
}


@media only screen and (max-width: 760px) {
    :root {
        --doc-card-header-margin: 30px;
        --doc-card-max-width: 100%;
        --doc-card-gap: 20px;
        --doc-card-min-height: 105px;
        --doc-card-padding: 10px 30px;
        --doc-card-logo-width: 60px;
        --doc-card-logo-margin-bottom: 0;
    }

    .documents__container {
        justify-content: start;
        flex-direction: column;
        align-items: center;
    }

    .document__card {
        justify-content: space-between;
        gap: var(--doc-card-gap);
        flex-direction: row;
    }

    .document__card_logo {
        width: var(--doc-card-logo-width);
    }
}

@media only screen and (max-width: 560px) {
    :root {
        --doc-card-header-fs: 28px;
        --doc-card-logo-width: 50px;
        --doc-card-min-height: 85px;
    }

    .document__card_logo {
        width: var(--doc-card-logo-width);
    }
}