:root {
  --single-vacancy-content-padding: 6rem;
  --single-vacancy-header-padding: calc(
    var(--single-vacancy-content-padding) / 2
  );
  --single-vacancy-key-info-table-column-count: 2;
  --single-vacancy-key-info-table-gap: calc(var(--layout-gap-basis) * 0.5);
  --single-vacancy-contact-person-margin: calc(var(--layout-gap-basis) * 0.5) 0;
  --single-vacancy-contact-person-contact-details-font-size: 1.7rem;
  --single-vacancy-contact-person-contact-details-line-height: 1.2;
  --single-vacancy-contact-person-gap: 2.5rem;
  --single-vacancy-apply-button-top-margin: var(
    --single-vacancy-content-padding
  );
}

/*
 * 2XL Media Query (1800px)
 * Target: 1799px > 1800px
 *
 */
@media screen and (max-width: 1799px) {
  :root {
    --single-vacancy-content-padding: 5rem;
  }
}

/*
 * S Media Query (640px)
 * Target: < 767px
 * Test Resolution: 390 x 844
 */
@media screen and (max-width: 767px) {
  :root {
    --single-vacancy-content-padding: 2rem;
    --single-vacancy-header-padding: calc(
      var(--single-vacancy-content-padding) / 1.25
    );
    --single-vacancy-key-info-table-column-count: 1;
    --single-vacancy-key-info-table-gap: 1.5rem;
    --single-vacancy-contact-person-margin: 1rem 0;
    --single-vacancy-contact-person-contact-details-font-size: 1.4rem;
    --single-vacancy-contact-person-gap: 2rem;
    --single-vacancy-apply-button-top-margin: 3rem;
  }
}

.single-vacancy-container {
  border-radius: 1.4rem;
  background-color: var(--theme-color-white);
}

.single-vacancy-header {
  border-radius: 1.4rem 1.4rem 0 0;
  background-color: var(--theme-color-accent);
  text-align: center;
  padding: var(--single-vacancy-header-padding);
}

.single-vacancy-content {
  padding: var(--single-vacancy-content-padding);
}

.single-vacancy-related-people {
  margin: calc(var(--author-card-small-gap) * 0.75) 0;
}

.single-vacancy-key-info-table {
  display: grid;
  margin: var(--typography-small-form-page-heading-top-offset) 0;
  grid-template-columns: repeat(
    var(--single-vacancy-key-info-table-column-count),
    minmax(0, 1fr)
  );
  gap: var(--single-vacancy-key-info-table-gap);
}

.single-vacancy-contact-person {
  display: flex;
  align-items: center;
  margin: var(--single-vacancy-contact-person-margin);
  gap: var(--single-vacancy-contact-person-gap);
}

.single-vacancy-contact-person-image {
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 50%;
  object-fit: cover;
}

.single-vacancy-contact-person-contact-details {
  font-size: 1.7rem;
  line-height: 1.2;
  font-size: var(--single-vacancy-contact-person-contact-details-font-size);
  line-height: var(--single-vacancy-contact-person-contact-details-line-height);
}

.single-vacancy-apply-button {
  margin-top: var(--single-vacancy-content-padding);
  margin-top: var(--single-vacancy-apply-button-top-margin);
}