:root {
    --directions-max-width: 1400px;
    --directions-padding: 0 24px;
    --directions-margin: 0 auto 227px;
    --directions-btn-text-color:  rgba(25, 25, 25, 1);
    --directions-text-color: rgba(255, 255, 255, 1);
    --directions-text-color-hover: rgba(240, 240, 240, 1);
    --directions-text-color-active: rgba(227, 225, 225, 1);
    --directions-title-margin: 0 0 47px;
    --directions-title-font-size: 60px;
    --directions-title-font-weight: 500;
    --directions-text-font-weight: 300;
    --directions-title-descr-margin: 0 0 92px;
    --directions-title-max-width: 650px;
    --directions-btns-border-radius: 120px;
    --directions-transition: all .3s;
    --directions-btn-padding: 11px 41px;
    --directions-directions-gap: 28px;
    --directions-directions-block-margin: 0 0 92px;
    --directions-direction-border-radius: 20px;
    --directions-direction-border-color: rgb(255, 255, 255, 0.32);
    --directions-direction-background-color: rgba(255, 255, 255, 0.14);
    --directions-direction-background-filter: blur(10px);
    --directions-direction-height: 275px;
    --directions-direction-padding: 46px;
    --direction-icon-margin: 0 0 30px;
    --direction-description-more-link-color: rgba(154, 150, 150, 1);
    --direction-description-more-link-margin-end: 12px;
}

.directions {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: start;
    margin: var(--directions-margin);
    padding: var(--directions-padding);
    max-width: var(--directions-max-width);
}

.directions_title {
    width: 100%;
    text-align: center;
    color: var(--directions-text-color);
    margin: var(--directions-title-margin);
    font-size: var(--directions-title-font-size);
    line-height: var(--directions-title-font-size);
    font-weight: var(--directions-title-font-weight);
}

.directions_descr {
    font-size: 20px;
    line-height: 32px;
    text-align: center;
    color: var(--directions-text-color);
    max-width: var(--directions-title-max-width);
    margin: var(--directions-title-descr-margin);
    font-weight: var(--directions-text-font-weight);
}

.directions_descr b {
    font-weight: var(--directions-title-font-weight);
}

.directions > .button {
    border-radius: var(--directions-btns-border-radius);
    font-weight: var(--directions-title-font-weight);
    background-color: var(--directions-text-color);
    transition: var(--directions-transition);
    color: var(--directions-btn-text-color);
    padding: var(--directions-btn-padding);
    text-decoration: none;
    line-height: 14px;
    cursor: pointer;
    font-size: 16px;
}

.directions > .button:hover, .directions > .button:focus {
    background-color: var(--directions-text-color-hover);
}

.directions > .button:active {
    background-color: var(--directions-text-color-active);
}

.directions_block {
    width: 100%;
    display: grid;
    gap: var(--directions-directions-gap);
    margin: var(--directions-directions-block-margin);
    grid-template-columns: repeat(3, calc(100%/3 - 2 * var(--directions-directions-gap) / 3));
}

.direction {
    width: 100%;
    display: flex;
    cursor: pointer;
    align-items: center;
    text-decoration: none;
    flex-direction: column;
    justify-content: center;
    /*height: var(--directions-direction-height);*/
    padding: var(--directions-direction-padding);
    border-radius: var(--directions-direction-border-radius);
    /*border: 1px solid var(--directions-direction-border-color);*/
    backdrop-filter: var(--directions-direction-background-filter);
    background-color: var(--directions-direction-background-color);
    /*background: linear-gradient(0deg, rgb(255, 255, 255, 0.14), rgb(255, 255, 255, 0.14));*/
}

.direction:hover, .direction:focus {

}

.direction:active {

}

.direction > .icon {
    margin: var(--direction-icon-margin);
}

.direction > .title {
    font-size: 20px;
    line-height: 26px;
    color: var(--directions-text-color);
    margin: var(--direction-icon-margin);
    font-weight: var(--directions-title-font-weight);
}

.direction > .link {
    display: flex;
    font-size: 16px;
    line-height: 21px;
    align-items: center;
    text-decoration: none;
    font-weight: var(--directions-text-font-weight);
    color: var(--direction-description-more-link-color);
}

.direction > .link > span {
    margin-inline-end: var(--direction-description-more-link-margin-end);
}