// ==============================================
// 💪 CAREER SCSS
// ==============================================

.sec-career{
  padding: 214px 0 100px;
  overflow: hidden;
  @media screen and (max-width: $screen-xs) {
    padding: 130px 0 60px;
  }
  &.ptb-48{
    padding: 48px 0;
  }
  .career-wrapper{
    .career-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
      @media screen and (min-width: 992px) {
        align-items: self-end;
      }
      @media screen and (max-width: 991px) and (min-width: 768px) {
        grid-template-columns: repeat(2, calc(50% - 12px));
      }
      @media screen and (max-width: $screen-xs) {
        grid-template-columns: 1fr;
      }
      .candidate-card-02 {
        width: 100%;
        height: auto;
        &:nth-of-type(1), &:nth-of-type(7){
          @media screen and (max-width: $screen-xs) {
            display: block;
          }
          .img-wrapper{
            img{
              @media screen and (min-width: 992px) {
                height: 480px;
              }
              @media screen and (max-width: $screen-xs) {
                height: 225px;
              }
            }
          }
          .content-wrapper{
            @media screen and (min-width: 992px) {
              padding: 42px 34px 104px;
            }
            @media screen and (max-width: $screen-xs) {
              padding: 24px 24px 68px;
            }
            h4{
              @media screen and (min-width: 992px) {
                @include font-size(32);
                margin-bottom: 32px!important;
              }
              @media screen and (max-width: $screen-xs) {
                min-height: auto;
                margin-bottom: 20px!important;
                @include font-size(20);
              }
            }
            p{
              @media screen and (min-width: 992px) {
                @include font-size(20);
              }
              @media screen and (max-width: $screen-xs) {
                display: block;
                @include font-size(17);
              }
            }
            .btn-wrapper{
              @media screen and (min-width: 992px) {
                bottom: 34px;
              }
              @media screen and (max-width: $screen-xs) {
                bottom: 20px;
              }
            }
          }
        }
        .content-wrapper{
          h4{
            min-height: 44px;
          }
        }
      }

      &:has(.candidate-card-02) {
        .candidate-card-02:nth-of-type(1) {
          @media screen and (min-width: 992px) {
            grid-column: span 8;
          }
        }

        .candidate-card-02:nth-of-type(2) {
          @media screen and (min-width: 992px) {
            grid-column: span 4;
          }
        }

        .candidate-card-02:nth-of-type(3),
        .candidate-card-02:nth-of-type(4),
        .candidate-card-02:nth-of-type(5) {
          @media screen and (min-width: 992px) {
            grid-column: span 4;
          }
        }

        .candidate-card-02:nth-of-type(6) {
          @media screen and (min-width: 992px) {
            grid-column: span 4;
            align-self: start;
          }
        }

        .candidate-card-02:nth-of-type(7) {
          @media screen and (min-width: 992px) {
            grid-column: span 8;
          }
        }
      }
    }
    .btn-wrapper{
      .btn-style{
        @media screen and (max-width: $screen-xs) {
          min-width: 100%;
        }
      }
    }
  }
}

.sec-breadcrumb{
  .container{
    padding: 0;
  }
}