.vacancy-card + .vacancy-card {
  margin-top: 10px;
}
.vacancy-card:not(.vacancy-card + .vacancy-card):has(+ .vacancy-card) {
  background-color: var(--brand-gold);
}
.vacancy-card__toggle[aria-expanded="true"] {
  bottom: -6px;
}

/* Now that the button labels are 14px rather than 10px, the two actions need
   ~293px but the row is only ~259px wide on a phone, and the row is shrink-0,
   so the page gained horizontal scroll at 320px. Let them wrap and fill the
   row instead; from 768px up they still sit side by side. */
@media all and (max-width: 767px) {
  .vacancy-card__actions {
    flex-wrap: wrap;
  }
  .vacancy-card__actions > a {
    flex: 1 0 auto;
  }
}

@media all and (min-width: 1280px) {
  .vacancy-card + .vacancy-card {
    margin-top: 1vw;
  }
}