:root {
    --vacancies-margin: 0 auto;
    --vacancies-padding: 0 24px;
    --vacancies-max-width: 1328px;
    --vacancies-title-margin: 0 auto 47px;
    --vacancies-title-font-size: 60px;
    --vacancies-title-font-weight: 500;
    --vacancies-text-font-weight: 300;
    --vacancies-title-descr-margin: 0 auto 92px;
    --vacancies-title-max-width: 385px;
    --vacancies-vacancies-block-margin: 0 auto 92px;
    --vacancies-vacancies-gap: 28px;
    --vacancy-border-radius: 14px;
    --vacancy-description-padding: 21px 21px 45px 28px;
    --vacancy-description-title-margin: 21px 21px 45px 28px;
    --vacancy-description-title-color: rgba(25, 25, 25, 1);
    --vacancy-transition: all .3s;
    --vacancy-background-color: rgba(255, 255, 255, 1);
    /*--vacancy-background-color-hover: rgba(240, 240, 240, 1);*/
    --vacancy-background-color-hover: #E5E5E5;
    --vacancy-background-color-active: rgba(227, 225, 225, 1);
    --vacancy-more-padding: 7px 19px 7px 14px;
    --vacancy-more-height: 64px;
    --vacancy-more-img-margin-end: 25px;
}

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

.vacancies_title {
    width: 100%;
    text-align: center;
    margin: var(--vacancies-title-margin);
    color: var(--vacancy-background-color);
    font-size: var(--vacancies-title-font-size);
    line-height: var(--vacancies-title-font-size);
    font-weight: var(--vacancies-title-font-weight);
}

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

.vacancies_descr . b {
    font-weight: var(--vacancies-title-font-weight);
}

.vacancies_blocks {
    width: 100%;
    display: grid;
    gap: var(--vacancies-vacancies-gap);
    margin: var(--vacancies-vacancies-block-margin);
    grid-template-columns: repeat(2, calc(50% - var(--vacancies-vacancies-gap) / 2));
}

.vacancies_blocks .big, .vacancies_blocks .small {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: start;
}

.vacancy {
    width: 100%;
    display: flex;
    cursor: pointer;
    overflow: hidden;
    align-items: center;
    flex-direction: row;
    justify-content: start;
    transition: var(--vacancy-transition);
    border-radius:var(--vacancy-border-radius);
    background-color: var(--vacancy-background-color);
}

.small > .vacancy {
    margin-bottom: var(--vacancies-vacancies-gap);
}

.small > .more {
    width: 100%;
    display: flex;
    cursor: pointer;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--vacancy-more-padding);
    transition: var(--vacancy-transition);
    border-radius: var(--vacancy-border-radius);
    border: 2px solid var(--vacancy-background-color);
}

.vacancy:hover, .vacancy:focus {
    background-color: var(--vacancy-background-color-hover);
}

.vacancy:active {
    background-color: var(--vacancy-background-color-active);
}

.vacancy:first-child {
    margin-bottom: var(--vacancies-vacancies-gap);
}

.vacancy > .image {

}

.vacancy > .description {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--vacancy-description-padding);
}

.vacancy > .description > .arrow_div {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: end;
}

.vacancy > .description > .title {
    margin: 0;
    font-size: 20px;
    line-height: 23px;
    color: var(--vacancy-description-title-color);
    font-weight: var(--vacancies-title-font-weight);
}

.more > .title_div {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    height: var(--vacancy-more-height);
}

.more > .title_div > img {
    margin-inline-end: var(--vacancy-more-img-margin-end);
}

.more > .title_div > .title {
    margin: 0;
    font-size: 20px;
    line-height: 30px;
    color: var(--vacancy-background-color);
    font-weight: var(--vacancies-title-font-weight);
}

.more:hover, .more:focus {

}

.more:active {

}