:root {
    --company-values-items-grid-columns: 2fr 1fr 1fr;
    --company-values-items-width: 100%;
    --company-values-items-gap: 15px;
    --company-values-title-margin-bottom: calc(3 * var(--about-block-vertical-padding));
    --company-values-items-title-max-width: 265px;
}

.about_values_container {
    grid-template-columns: var(--company-values-items-grid-columns);
    margin-bottom: var(--about-page-slogan-margin-bottom);
    width: var(--company-values-items-width);
    gap: var(--company-values-items-gap);
    box-sizing: border-box;
    display: grid;
}

.about_values_item {
    padding-inline-end: var(--company-values-items-gap);
    border-inline-end: var(--nav-border);
    gap: var(--company-values-items-gap);
    justify-content: space-between;
    flex-direction: column;
    display: flex;
}

.about_values_item:last-child {
    border: none;
}

.about_values_title_div, .about_values_header_div {
    margin-bottom: var(--company-values-title-margin-bottom);
    gap: var(--company-values-items-gap);
    justify-content: space-between;
    flex-direction: row;
    align-items: start;
    display: flex;
}

.about_values_header_div {
    justify-content: end;
}

.about_values_title {
    font-weight: var(--header-text-font-weight);
    line-height: var(--header-text-line-height);
    font-size: var(--header-text-font-size);
    letter-spacing: var(--letter-spacing);
    color: var(--text-main-color);
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
}

.about_values_value_title {
    max-width: var(--company-values-items-title-max-width);
    line-height: var(--usual-text-line-height);
    font-weight: var(--usual-text-font-weight);
    font-size: var(--usual-text-font-size);
    letter-spacing: var(--letter-spacing);
    color: var(--text-main-color);
    text-transform: uppercase;
    text-align: end;
    margin: 0;
}

.about_values_value_descr {
    font-weight: var(--usual-text-font-weight);
    line-height: var(--usual-text-line-height);
    font-size: var(--usual-text-font-size);
    letter-spacing: var(--letter-spacing);
    color: var(--text-main-color);
    margin: 0;
}

@media only screen and (max-width: 1640px) {
    :root {
        --company-values-items-grid-columns: 1fr 1fr;
        --company-values-items-gap: 30px;
    }

    .about_values_item {
        border-inline-end: none;
        padding-inline-end: 0;
    }

    .about_values_item.first {
        border-bottom: var(--nav-border);
        border-inline-end: none;
        grid-column: span 2;
    }

    .about_values_item.first > .about_values_value_descr {
        padding-bottom: var(--company-values-items-gap);
    }

    .about_values_item:last-child {
        border-inline-start: var(--nav-border);
    }

    .about_values_title_div, .about_values_header_div {
        padding-inline-end: 0;
    }

    .about_values_item > .about_values_value_descr {
        padding-inline-end: 0;
        text-align: end;
    }

    .about_values_item:last-child > .about_values_value_descr {
        padding-inline-start: var(--company-values-items-gap);
    }
}






/* DISABLE STYLES */
@media only screen and (max-width: 680px) {
    :root {
        --company-values-items-grid-columns: 100%;
        --company-values-items-gap: 20px;
    }

    .about_values_item.first {
        grid-column: span 1;
    }

    .about_values_item {
        border-bottom: var(--nav-border);
    }

    .about_values_title_div {
        padding-bottom: calc(2 * var(--company-values-items-gap));
        gap: calc(2 * var(--company-values-items-gap));
        justify-content: space-between;
        flex-direction: column;
        align-items: end;
        margin-bottom: 0;
        width: 100%;
    }

    .about_values_header_div {
        padding-bottom: calc(2 * var(--company-values-items-gap));
        justify-content: start;
        margin-bottom: 0;
    }

    .about_values_title {
        width: 100%;
    }

    .about_values_item > .about_values_value_descr {
        padding-bottom: var(--company-values-items-gap);
    }

    .about_values_value_descr:last-child > .about_values_header_div {
        justify-content: end;
    }

    .about_values_item:last-child {
        border-inline-start: none;
        border-bottom: none;
    }

    .about_values_item:last-child > .about_values_header_div {
        justify-content: end;
    }

    .about_values_item > .about_values_value_descr {
        padding-inline-end: 0;
        text-align: start;
    }

    .about_values_item:first-child > .about_values_value_descr,
    .about_values_item:last-child > .about_values_value_descr {
        text-align: end;
    }
}