/* Work Page Styles */
.job-introduction-section {
  background-color: #222222;
  padding-top: 6.8rem;
  padding-bottom: 12rem;

  .job-introduction-section-description {
    color: #ffffff;
    margin-top: 3.2rem;
    margin-bottom: 4rem;
  }

  .job-introduction-section-job-category-wrapper {
    display: grid;
    gap: 4rem;
    margin: 0 1.7rem;
  }

  .job-introduction-section-job-category {
    padding: 4rem 3.2rem 6rem 3.2rem;
    background-color: #676767;
  }

  .job-introduction-section-job-category-title {
    color: #ffffff;
    margin-bottom: 1rem;
    background-color: #011822;
    text-align: center;
    font-size: 2.4rem;
    line-height: 4.7rem;
    font-weight: 700;
  }

  .job-introduction-section-job-category-job {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }

  .job-introduction-section-job-category-job-card {
    background-color: #ffffff;
    border-radius: 1.2rem;
    padding: 1.6rem;
    position: relative;
  }

  .label-title {
    font-size: 2rem;
    line-height: 3.5rem;

    &::before {
      height: 3.1rem;
    }
  }

  .job-introduction-section-job-category-job-card-image {
    height: 16rem;
    object-fit: cover;
    border-radius: 0.8rem;
    margin-top: 1rem;
    margin-bottom: 1.6rem;
  }

  .job-introduction-section-job-category-job-card-description {
    margin-bottom: 9.6rem;
  }

  .main-button {
    position: absolute;
    bottom: 1.6rem;
    left: 1.6rem;
    width: 90%;
  }

  .job-introduction-section-job-category-sub-title {
    color: #ffffff;
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 2.4rem;
    border-bottom: 1px solid #adadad;
    padding-bottom: 2.4rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 100%;
  }
}

@media (max-width: 780px) {
  .job-introduction-section {
    padding-top: 3.7rem;
    padding-bottom: 8rem;

    .job-introduction-section-job-category-wrapper {
      gap: 3.2rem;
      margin: 0;
    }

    .job-introduction-section-job-category {
      padding: 0;
      padding-bottom: 1rem;
    }

    .job-introduction-section-job-category-title {
      font-size: 1.6rem;
      line-height: 4rem;
    }

    .job-introduction-section-job-category-job {
      grid-template-columns: 1fr;
      gap: 1rem;
      padding: 0 1rem;
    }

    .job-introduction-section-job-category-job-card {
      padding: 1.2rem 1.2rem 10rem 1.2rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 2rem;
      row-gap: 0.8rem;
    }

    .label-title {
      font-size: 1.6rem;
      line-height: 2.1rem;
      grid-column: span 2;

      &::before {
        height: 2.1rem;
      }
    }

    .job-introduction-section-job-category-job-card-image {
      height: 10rem;
      border-radius: 0.4rem;
      margin: 0;
    }

    .job-introduction-section-job-category-job-card-description {
      margin-bottom: 0;
      display: flex;
      align-items: end;
    }

    .main-button {
      left: 50%;
      transform: translateX(-50%);
      max-width: 45rem;
    }

    .job-introduction-section-job-category-sub-title {
      margin-top: 3.2rem;
      margin-bottom: 2rem;
      padding-bottom: 1.2rem;
      font-size: 1.6rem;
    }
  }
}

.project-story-section {
  padding-top: 10rem;
  padding-bottom: 2rem;

  .project-story-section-item-wrapper {
    margin-top: 3.2rem;
    margin-bottom: 10rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .project-story-section-item:first-child {
    grid-column: span 2;
  }
}

@media (max-width: 780px) {
  .project-story-section {
    padding-top: 4rem;

    .project-story-section-item-wrapper {
      margin-bottom: 6.2rem;
      grid-template-columns: 1fr;
      gap: 1rem;
    }

    .project-story-section-item:first-child {
      grid-column: unset;
    }
  }
}