@media all {

  .ce-type-list .tx-jobapplications {
    --filter-columns: 1;

    & ,
    & > .ce-nested-container {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: subgrid;
      grid-row-gap: var(--page-gap);

      & > .ce-element {
        grid-column: 3 / -3;

        & .btn {
          width: unset;
        }

        &.ce-jobs-filters {

          & .ce-form-filter {
            display: grid;
            grid-gap: var(--page-grid-gap);

            & > .ce-form-filter-options {
              display: grid;
              grid-gap: var(--page-grid-gap);
              grid-template-columns: repeat(var(--filter-columns), minmax(0, 1fr));

              & > .ce-form-group {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: var(--element-gap-smallest);

                & label {
                  font-weight: 700;
                }

              }

            }

            & > .ce-form-filter-controls {
              display: flex;
              grid-gap: var(--page-grid-gap);
            }

          }

        }

        &.ce-jobs-list {

          & .ce-nested-container {
            display: grid;
            grid-gap: var(--page-grid-gap);

            & .ce-bodytext p {
              display: flex;
              grid-gap: var(--page-grid-gap);

              & .ce-teaser-link-inline {
                margin-left: auto;
              }

            }

          }

        }

      }

      &.ce-jobs-posting {

        & > .ce-element {

          & .ce-infobox {
            display: flex;
            gap: var(--element-gap-text);
            padding: var(--element-gap-small) var(--element-gap-text);
            background-color: var(--current-box-background);
            border-radius: var(--radius-small);
          }

        }

      }

    }

    & > .ce-header ,
    & form {
      grid-column: 3 / -3;
    }

    & form {
      grid-column: 3 / -3;
      display: grid;
      gap: calc(var(--page-grid-gap) * 2) var(--page-grid-gap);

      & > div:not([class]):not(:has(> :not([type="hidden"]))) {
        display: none;
      }

      & .form-row {
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        gap: calc(var(--page-grid-gap) * 2) var(--page-grid-gap);

        & > .form-group {
          width: 100%;
          display: flex;
          flex-direction: column;
          gap: var(--element-gap-smallest);

          & label {
            font-weight: 700;

            & .filepond--label-action {
              border-radius: .25rem;
            }

          }

        }

        &:has(> .form-text) {
          flex-direction: column;

          & > .form-text {
            margin: unset !important;
          }

        }

      }

      & button[type="submit"] {
        justify-self: start;
        display: flex;

        &::before {
          content: "\f1d8";
          font-weight: 900;
          font-family: 'Font Awesome 6 Free';
          -moz-osx-font-smoothing: grayscale;
          -webkit-font-smoothing: antialiased;
          font-style: normal;
          font-variant: normal;
          line-height: 1;
          text-rendering: auto;
          margin-right: var(--size-1);
        }

      }

      & .new-mail {
        position: absolute;
      }

    }

  }

}

@media (min-width: 62.5rem) {

  .ce-type-list .tx-jobapplications {
    --filter-columns: 2;

    & ,
    & > .ce-nested-container {

      &.ce-jobs-posting {

        & > .ce-element {
          grid-column: 7 / -7;
        }

      }

    }

    & form {

      & .form-row {
        flex-direction: row;

        & > .form-group {
          width: calc((100% - var(--page-grid-gap)) / 2);
        }

      }

    }

  }

}