@import "jobs-form.css";

/*****************************************************/
/********************* JOB PAGE **********************/
/*****************************************************/

#jobs-header {
  background-image: url(../img/header_job_small.webp);
}

.jobs-content {
  padding: 30px 15px 0 15px;
}

.job + .job {
  margin: 30px 0 0 0;
}

.job a {
  display: block;
  padding: 15px;
  border: 2px solid #e4e4e4;
  border-radius: 5px;
  text-decoration: none;
}

.job-title {
  display: block;
  font-size: 2.5rem;
  line-height: 3rem;
  font-weight: 900;
  color: #1a9da2;
}

.job-title span {
  font-weight: 400;
}

.job-place {
  display: block;
  font-size: 1.75rem;
  line-height: 2.25rem;
  color: #333333;
}

.job-contract {
  display: block;
  margin: 15px 0 0 0;
  font-size: 1.75rem;
  line-height: 2.25rem;
  color: #333333;
}

#job-application {
  width: calc(100% - 30px);
  margin: 30px auto 0;
}

@media (min-width: 600px) {
  #jobs-header {
    background-image: url(../img/header_job_medium.webp);
  }

  .jobs-content {
    padding: 30px 30px 0 30px;
  }

  .job-title {
    font-size: 3.5rem;
    line-height: 4rem;
  }

  #job-application {
    width: calc(100% - 60px);
  }
}

@media (min-width: 900px) {
  .jobs-content {
    padding: 60px 60px 0 60px;
  }

  .job + .job {
    margin: 60px 0 0 0;
  }

  .job a {
    padding: 30px;
    transition: all 0.3s ease-out;
  }

  .job a:hover {
    border: 2px solid #10676a;
  }

  .job-title {
    font-size: 4.5rem;
    line-height: 5rem;
    transition: all 0.3s ease-out;
  }

  .job a:hover .job-title {
    color: #10676a;
  }

  .job-place,
  .job-contract {
    font-size: 2rem;
    line-height: 3rem;
  }

  #job-application {
    width: calc(100% - 120px);
    margin: 60px auto 0;
  }
}

@media (min-width: 1200px) {
  #jobs-header {
    background-image: url(../img/header_job.webp);
  }

  .jobs-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 120px 0 0 0;
  }

  #job-application {
    width: 100%;
    max-width: 800px;
  }
}