.view-display-id-job_posting_list {

  & .views-view-responsive-grid__item {
    padding: 32px;
    background: var(--bg-tertiary);
    border-radius: 20px;

    container-type: inline-size;
    container-name: job-posting;
  }

  & .group-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 16px;

    & .views-field-field-member-roles {
      background: var(--bg-alternate);
      color: var(--text-alternative);
      padding: 4px 8px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px 0;
    }
  }

  & .group-metadata {
    display: flex;
    gap: 16px 24px;
    margin-bottom: 32px;
    flex-direction: column;

    @container job-posting (min-width: 480px) {
      flex-direction: row;
    }
  }

  & .job-dynamic-detail {
    display: inline-flex;

    &::before {
      content: "";
      width: 24px;
      height: 24px;
      background: var(--text-secondary);
      margin-right: 12px;
      mask-repeat: no-repeat;
      mask-size: cover;
    }
  }

  & .job-dynamic-detail--location::before {
      mask-image: url("/modules/custom/ui_icons_boxicons/node_modules/boxicons/svg/regular/bx-map.svg");
  }

  & .job-dynamic-detail--job-category::before {
    mask-image: url("/modules/custom/ui_icons_boxicons/node_modules/boxicons/svg/regular/bx-briefcase.svg");
  }

  & .views-field-field-closing-date {
    display: inline-flex;

    &::before {
      content: "";
      width: 24px;
      height: 24px;
      background: var(--text-secondary);
      margin-right: 12px;
      mask-image: url("/modules/custom/ui_icons_boxicons/node_modules/boxicons/svg/regular/bx-time-five.svg");
      mask-repeat: no-repeat;
      mask-size: cover;
    }

    & .views-label-field-closing-date {
      font-weight: 500;

      &::after {
        content: "·";
        padding: 0 4px;
      }
    }
  }

  & .views-field-field-document a {
    vertical-align: top; /* for the edit button */
    width: 100%;

    &::before {
      content: "";
      width: 24px;
      height: 24px;
      background-color: currentColor;
      mask-image: url("/modules/custom/ui_icons_boxicons/node_modules/boxicons/svg/regular/bx-download.svg");
      mask-repeat: no-repeat;
      mask-size: cover;
    }
    &:hover {
      background-color: var(--color-cedar);
      color: var(--text-alternative);
    }
  }

  @container job-posting (min-width: 768px) {
    & .views-field-field-document a {
      width: fit-content;
    }
  }
}