.vacancy-card {
  position: relative;
  display: grid;
  overflow: hidden;
  margin-bottom: var(--anrt-spacing-100);
  cursor: pointer;
  color: var(--anrt-color-text);
  border-radius: var(--anrt-radius);
  background-color: var(--anrt-color-white);
}

@media (min-width: 64rem) {
  .vacancy-card {
    grid-template-columns: 287px 1fr;
    margin-bottom: var(--anrt-spacing-200);
  }
}

.vacancy-card:hover,
.vacancy-card:focus,
.vacancy-card:active,
.vacancy-card:focus-within {
  background-color: var(--anrt-color-white);
  box-shadow: 0 8px 8px rgb(0 0 0 / 0.15);
}

@media (max-width: 64rem) {
  .vacancy-card__image img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

.vacancy-card__content {
  padding: var(--anrt-spacing-100) var(--anrt-spacing-100) var(--anrt-spacing-200) var(--anrt-spacing-100);
}

@media (min-width: 64rem) {
  .vacancy-card__content {
    padding: var(--anrt-spacing-200);
  }
}

.vacancy-card::after {
  position: absolute;
  right: var(--anrt-spacing-050);
  bottom: var(--anrt-spacing-100);
  display: inline-block;
  width: var(--anrt-spacing-100);
  height: var(--anrt-spacing-100);
  margin-right: var(--anrt-spacing-100);
  content: "";
  background: url(../../../assets/icons/svg/custom/triangle-link-block.svg) no-repeat center;
  background-size: contain;
}

@media (min-width: 64rem) {
  .vacancy-card::after {
    right: var(--anrt-spacing-100);
    bottom: var(--anrt-spacing-200);
  }
}

.vacancy-card__image {
  background: #092645;
}