.job {
  margin-bottom: 4rem; }
  .job__header {
    padding-top: 1.5rem;
    background-color: #fff3b8; }
    @media (min-width: 768px) {
      .job__header {
        padding-top: 0; } }
    .job__header.has-empty-image .job__info {
      padding-left: 0; }
  @media (min-width: 768px) {
    .job__header-inner {
      display: flex; }
      .job__header-inner > div {
        width: 50%; } }
  .job__header-item {
    display: flex;
    align-items: center;
    margin-top: 0.75rem; }
    .job__header-item .label {
      margin-left: 0.75rem; }
  .job__image {
    padding-bottom: 56.25%; }
    @media (min-width: 768px) {
      .job__image {
        padding-bottom: 0; } }
  .job__info {
    padding: 1.5rem; }
    @media (min-width: 992px) {
      .job__info {
        padding: 2rem 1.5rem 3.5rem; } }
  .job__date {
    font-size: 1.125rem;
    margin: 0.5rem 0; }
  .job__title {
    font-size: 2.25rem;
    line-height: 1.1;
    margin: 0.5rem 0 1.5rem; }
  .job__lead {
    font-size: 1.125rem;
    margin: 0 0 1.5rem; }
  .job__location,
  .job .ticket__price {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem; }
    .job__location .hds-icon,
    .job .ticket__price .hds-icon {
      flex: 0 0 auto;
      margin-right: 0.5rem; }
  .job .ticket__actions {
    margin-top: 1.5rem; }
  .job__grid {
    grid-gap: 0.75rem; }
    @supports (grid-area: auto) {
      .job__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr); }
        @media (min-width: 768px) {
          .job__grid {
            grid-template-columns: repeat(8, 1fr); } }
        @media (min-width: 992px) {
          .job__grid {
            grid-template-columns: repeat(12, 1fr); } } }
    @media (min-width: 576px) {
      .job__grid {
        grid-gap: 1rem; } }
    @media (min-width: 768px) {
      .job__grid {
        grid-gap: 1rem; } }
  .job__description, .job__details {
    margin-top: 1.5rem;
    grid-column: span 4; }
    @media (min-width: 992px) {
      .job__description, .job__details {
        margin-top: 3rem;
        grid-column: span 6; } }
    .job__description :first-child, .job__details :first-child {
      margin-top: 0; }
    .job__description :last-child, .job__details :last-child {
      margin-top: 0; }
  .job__description-title {
    margin-top: 0; }
  @media (min-width: 768px) {
    .job__details {
      padding-left: 1.5rem; } }
  .job .detail-block--is-inline {
    display: flex;
    flex-direction: row;
    margin-bottom: 0.75rem; }
    .job .detail-block--is-inline .detail-block__title {
      margin: 0 0.25rem 0 0; }
  .job__archive-link {
    margin-top: 3rem; }

@media (min-width: 992px) {
  .has-2-columns .job-grid__item {
    grid-column: span 6; } }

.job-grid {
  position: relative;
  margin-top: 4.5rem;
  padding: 4.5rem 0;
  background-color: #f1f1f1; }
  .job-grid__title {
    font-size: 2.25rem;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 4.5rem; }
  .job-grid__grid {
    grid-gap: 0.75rem; }
    @supports (grid-area: auto) {
      .job-grid__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr); }
        @media (min-width: 768px) {
          .job-grid__grid {
            grid-template-columns: repeat(8, 1fr); } }
        @media (min-width: 992px) {
          .job-grid__grid {
            grid-template-columns: repeat(12, 1fr); } } }
    @media (min-width: 576px) {
      .job-grid__grid {
        grid-gap: 1rem; } }
    @media (min-width: 768px) {
      .job-grid__grid {
        grid-gap: 1rem; } }
  .job-grid__item {
    grid-column: span 4; }
  .job-grid .koro {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    transform: rotate(180deg) translateY(-100%); }
    .job-grid .koro--grey {
      background-color: #f1f1f1; }

.job-grid-item {
  background-color: #ffffff; }
  .job-grid-item__image {
    padding-bottom: 56.25%; }
  .job-grid-item.has-image .job-grid-item__keywords {
    position: absolute;
    top: 0;
    right: 1.5rem;
    left: 1.5rem;
    transform: translateY(-100%); }
  .job-grid-item.has-empty-image .job-grid-item__info {
    padding-top: 1.5rem; }
  .job-grid-item.has-empty-image .job-grid-item__date {
    margin-top: 0.25rem; }
  .job-grid-item__info {
    position: relative;
    padding: 0 1.5rem 1.5rem; }
  .job-grid-item__title {
    font-size: 1.5rem;
    line-height: 1.1;
    margin: 0.75rem 0; }
  .job-grid-item__link {
    color: #000000;
    text-decoration: none;
    border-bottom: 1px solid transparent; }
    .job-grid-item__link:hover, .job-grid-item__link:focus {
      text-decoration: none;
      border-color: #000000; }
  .job-grid-item .hds-button {
    text-decoration: none; }