.group.careers-group {
  .row.careers-row {
    display: flex;

    @include breakpoint(mobile) {
      flex-flow: column nowrap;
    }
    @include breakpoint(tablet) {
      flex-flow: row nowrap;
      justify-content: center;
    }
    .careers {
      @include breakpoint(tablet) {
        width: calculateRem(1200);
      }
      .header {
        .search-filters {
          padding-bottom: 2rem;
          .search {
            @include breakpoint(mobile) {
              display: none;
            }
            @include breakpoint(tablet) {
              display: flex;
              justify-content: flex-end;

              margin-bottom: calculateRem(20);

              input {
                width: calculateRem(300);

                padding-top: 0;
                padding-right: calculateRem(20);
                padding-bottom: 0;
                padding-left: calculateRem(20);

                @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
                  height: calculateRem(30);
                }
              }
            }
          }
          .filters {
            @include breakpoint(mobile) {
              justify-content: center;
            }
            @include breakpoint(tablet) {
              justify-content: flex-end;              
            }
            .filter {
              &:last-child {
                margin-right: 0;
              }
            }
          }
        }
      }
      .careers-container {
        width: 100%;
        .career-card {

          @include breakpoint(mobile) {
            width: 100%;
          }
          @include breakpoint(tablet) {
            width: calc(33.333333% - 15px);
          }

          margin-bottom: calculateRem(30);
          border-radius: calculateRem(3);

          padding-top: calculateRem(30);
          padding-right: calculateRem(20);
          padding-bottom: calculateRem(30);
          padding-left: calculateRem(20);

          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.05);

          transition: all 0.1s linear;

          color: inherit;

          &:hover {
            box-shadow: 0 7.5px 7.5px 0 rgba(0, 0, 0, 0.05);
            transform: translateY(-2px);

            color: $black;
          }
          .career {
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-between;

            height: 100%;
          }
        }
      }
    }
  }
}
