.vacancies-how-we-work {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  min-height: 600px;
  margin: 50px 0 0;
  overflow: hidden;
  background: #FAFAFA;
}

.vacancies-how-we-work > .container {
  position: relative;
  display: flex;
  align-items: center;
}

.vacancies-how-we-work__image-wrapper {
  position: absolute;
  top: 0;
  left: 417px;
  min-width: calc(50vw + 232px);
  height: 100%;
}

.vacancies-how-we-work__image-wrapper:before {
  position: absolute;
  top: 0;
  left: -2px;
  display: block;
  width: 53%;
  height: 100%;
  content: "";
  background: linear-gradient(90deg, #FAFAFA 6%, rgba(250, 250, 250, 0.63) 64%, rgba(250, 250, 250, 0.00) 100%);
}

.vacancies-how-we-work__image,
.vacancies-how-we-work__image picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.vacancies-how-we-work__content-wrapper {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 570px;
}

.vacancies-how-we-work__content-wrapper:before,
.vacancies-how-we-work__content-wrapper:after {
  position: absolute;
  display: block;
  width: 170px;
  height: 86px;
  content: '';
  background: url('../img/home-hire.svg') center center / contain no-repeat;
}

.vacancies-how-we-work__content-wrapper:before {
  top: 100%;
  right: 100%;
}

.vacancies-how-we-work__content-wrapper:after {
  top: 0;
  right: -140px;
}

.vacancies-how-we-work__title {
  margin: 0 0 8px;
  font-family: HarlowDuoSerifPlain, serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 56px */
  color: var(--Primary-teal);
}

.vacancies-how-we-work__subtitle {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 21px */
  color: var(--Neutral-0);
}

.vacancies-how-we-work__subtitle p {
  margin: 0;
}

.vacancies-how-we-work__cta-label {
  max-width: 397px;
  margin: 0 0 12px;
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  font-variant: all-small-caps;
  line-height: 144%; /* 21.6px */
  color: var(--Primary-teal);
}

.vacancies-how-we-work__cta-description {
  max-width: 397px;
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  line-height: 150%; /* 18px */
  color: var(--Neutral-50);
}

.vacancies-how-we-work__btn-wrap {
  margin-top: 24px;
}

@media screen and (min-width: 1440px) {
  .vacancies-how-we-work {
    aspect-ratio: 12 / 5;
  }
}

@media screen and (max-width: 1280px) {
  .vacancies-how-we-work__content-wrapper {
    max-width: clamp(300px, -105px + 52.7344vw, 570px);
    padding: 30px 0;
  }

  .vacancies-how-we-work__image-wrapper {
    left: clamp(0px, -625.5px + 81.4453vw, 417px);
  }
}

@media screen and (max-width: 768px) {
  .vacancies-how-we-work {
    position: relative;
    padding-top: 374px;
  }

  .vacancies-how-we-work > .container {
    position: static;
  }

  .vacancies-how-we-work__content-wrapper {
    width: 100%;
    max-width: initial;
    padding: 0 0 40px;
    text-align: center;
  }

  .vacancies-how-we-work__image-wrapper {
    top: 0;
    left: 0;
    width: 100%;
    min-width: 100%;
    height: 374px;
  }

  .vacancies-how-we-work__image-wrapper:before {
    top: initial;
    right: 0;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(0deg, #FFF 11.5%, rgba(255, 255, 255, 0.00) 100%);
  }

  .vacancies-how-we-work__cta-label {
    margin: 0 auto 12px;
  }

  .vacancies-how-we-work__cta-description {
    margin: 0 auto;
  }
}