.jobs {
  margin-top: 0;

  &__item {
    position: relative;

    &:last-child {
      border: none;
    }

    &:not(:last-child) {
      padding-bottom: $spacing--m;
    }

    & + & {
      margin-top: $spacing--m;
    }
  }
}

@include viewport--l('inversed') {
  // different colors for meta on small viewports
  .bg-brand {
    &--blue,
    &--red,
    &--turquoise {
      .job-board-item__meta {
        color: $color-alpha--four-50;
      }
    }

    &--dark-blue {
      .job-board-item__meta {
        color: $color--two-50;
      }
    }

    &--yellow {
      .job-board-item__meta {
        color: $color-alpha--two-70;
      }
    }
  }
}

@include viewport--l {
  .jobs {
    margin-left: auto;
    width: grid-columns(8,9);

    &__item:not(:last-child) {
      padding-bottom: $spacing--l;
    }
  }
}
// overwrite fill hearts color depending on background
.bg-brand {
  &--blue,
  &--turquoise,
  &--red {
    .icon__toggler svg {
      fill: $color-alpha--four-50;
    }

    .icon__toggler:hover svg,
    .icon__toggler.icon__toggler--active svg {
      fill: $color-brand--four;
    }

    @media(hover:none) {
      .icon__toggler:not(.icon__toggler--active):hover svg {
        fill: $color-alpha--four-50;
      }
    }
  }

  &--dark-blue,
  &--yellow {
    .icon__toggler svg {
      fill: $color-alpha--four-50;
    }

    .icon__toggler:hover svg,
    .icon__toggler.icon__toggler--active svg {
      fill: $color-brand--five;
    }

    @media(hover:none) {
      .icon__toggler:not(.icon__toggler--active):hover svg {
        fill: $color-alpha--four-50;
      }
    }
  }
}
