// ==============================================
// 💪 SUPPORT SCSS
// ==============================================

.sec-job-search{
  margin: -212px 0 0 -32px;
  position: relative;
  z-index: 1;
  @media screen and (max-width: 1199px) and (min-width: 768px) {
    margin: -75px 0 0 0;
  }
  @media screen and (max-width: $screen-xs) {
    margin: -56px 0 0 0;
  }
  .container{
    padding: 0;
    @media screen and (max-width: 1199px) and (min-width: 768px) {
      padding: 0 24px;
    }
  }
}

.sec-posted-jobs{
  padding: 124px 0 60px;
  @media screen and (max-width: $screen-xs) {
    padding: 34px 0 40px;
  }
  .filter-header{
    ul.filter-list{
      display: flex;
      align-items: center;
      justify-content: right;
      gap: 64px;
      @media screen and (max-width: $screen-xs) {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: $white;
        justify-content: center;
        z-index: 2;
      }
      li{
        display: inline-flex;
        align-items: center;
        gap: 10px;
        position: relative;
        &:not(:last-of-type){
          &:before{
            content: "";
            background-color: $cool-gray-03;
            width: 1px;
            height: 100%;
            position: absolute;
            right: -32px;
            top: 0;
          }
        }
        .filter-icon{
          width: 60px;
          height: 60px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          a{
            &.active{
              img{
                filter: brightness(0) saturate(100%) invert(36%) sepia(92%) saturate(2100%) hue-rotate(330deg) brightness(103%) contrast(101%);
              }
            }
            img{
              max-width: 24px;
              filter: brightness(0) saturate(100%) invert(11%) sepia(7%) saturate(19%) hue-rotate(333deg) brightness(93%) contrast(96%);
            }
          }
        }
      }
    }
  }
  ul.search-tags{
    @media screen and (max-width: $screen-xs) {
      display: none;
    }
    li{
      display: inline-block;
      vertical-align: middle;
      &:not(:last-of-type){
        margin: 0 12px 0 0;
      }
    }
  }
  .posted-jobs-grid{
    display: grid;
    grid-template-columns: repeat(3, calc(33% - 13px));
    column-gap: 24px;
    row-gap: 24px;
    @media screen and (max-width: 1199px) and (min-width: 768px) {
      grid-template-columns: repeat(2, calc(50% - 13px));
    }
    @media screen and (max-width: $screen-xs) {
      grid-template-columns: 1fr;
    }
  }
}