/* Homepagina */

/* Hero: titel en zoekbalk; vanaf desktop met de foto rechts als achtergrond. */
.home-hero { padding: 30px 0 45px; }
.home-hero__title { color: var(--up-primary); font-size: clamp(34px, 12.3vw, 48px); font-weight: 800; line-height: 1.0625; margin: 0 0 12px; }
.home-hero__lead { color: var(--up-muted); margin: 0 0 20px; }
@media (min-width: 992px) {
  .home-hero { padding: 60px 0 70px; }
  .home-hero__content { max-width: 720px; }
  .home-hero__title { margin-bottom: 30px; }
  .home-hero__lead { margin-bottom: 35px; }
}
@media (min-width: 1200px) {
  .home-hero { align-items: center; background: url("../../img/hero/hero-photo.webp") no-repeat right center / auto 100%; display: flex; min-height: 640px; padding: 0; }
  .home-hero__title { font-size: 40px; max-width: 15em; }
  .home-hero .job-search__terms { max-width: 600px; }
}
@media (min-width: 1400px) {
  .home-hero { min-height: 750px; }
  .home-hero__title { font-size: 48px; }
  .home-hero .job-search__terms { max-width: none; }
}

/* Logo's van opdrachtgevers */
.home-brands { padding: 40px 0 0; }
.home-brands .scroller { --per-view: 2; }
.home-brands .scroller__track { align-items: center; min-height: 195px; }
.home-brands .scroller__item { padding: 0 15px; text-align: center; }
.home-brands .scroller__item img { max-height: 195px; object-fit: contain; width: 100%; }
@media (min-width: 768px) { .home-brands .scroller { --per-view: 4; } }
@media (min-width: 1200px) {
  .home-brands { padding-top: 0; }
  .home-brands .scroller { --per-view: 6; }
  .home-brands .scroller__track { margin: 0 -15px; }
}

/* Nieuwe vacatures */
.home-latest { padding: 85px 0 15px; }
.home-latest .section-lead { margin-bottom: 50px; }
.home-latest__more { padding-top: 20px; text-align: center; }

/* Fan van beeld */
.home-video { padding: 105px 0 90px; }
.home-video__frame { aspect-ratio: 605 / 315; }
.home-video__frame iframe { border: 0; display: block; height: 100%; width: 100%; }
.home-video__text h2 { color: var(--up-primary); font-size: 26px; line-height: 1; margin: 0 0 20px; }
.home-video__text ul { margin: 0 0 13px; padding-left: 40px; }
.home-video__text ul { margin-top: 41px; }
.home-video__button { --bs-btn-padding-x: 50px; margin-top: 20px; }
@media (min-width: 992px) {
  .home-video__frame { margin-right: 25px; }
  .home-video__text { padding-left: 65px; }
}
@media (max-width: 991.98px) {
  .home-video { padding: 60px 0; }
  .home-video__text { padding-top: 40px; }
}

/* Tellers */
.home-counters { padding: 15px 0; }
.home-counter { text-align: center; }
.home-counter__number { color: var(--up-button); font-size: 50px; font-weight: 500; line-height: 60px; margin: 0; }
.home-counter__label { line-height: 37.5px; margin: 0; }
@media (max-width: 767.98px) { .home-counter { margin-bottom: 20px; } }

/* Quotes */
.home-testimonials { background: url("../../img/bg/testimonials.webp") no-repeat center; padding: 115px 0 55px; }
.home-testimonials .section-lead { margin-bottom: 45px; }
.home-testimonial { margin: 0; padding: 0 15px; text-align: center; }
.home-testimonial > * { margin-left: auto; margin-right: auto; max-width: 555px; }
.home-testimonial__title { color: var(--up-primary); font-size: 18px; margin: 25px auto 0; }
.home-testimonial blockquote { font-size: 16px; font-weight: 500; line-height: 28px; margin-bottom: 25px; margin-top: 15px; }
.home-testimonial figcaption strong { color: var(--up-primary); display: block; font-family: var(--up-font-heading); font-size: 18px; font-weight: 500; line-height: 1.3; }
.home-testimonial figcaption span { color: var(--up-muted); font-size: 14px; }
@media (max-width: 767.98px) { .home-testimonials { padding: 70px 0 40px; } }

/* Recente banen */
.home-recent { background: var(--up-soft); margin-bottom: 140px; padding: 90px 0 95px; }
.home-recent .section-lead { margin-bottom: 50px; }
.home-recent .scroller { --per-view: 1; }
.home-recent .scroller__track { margin: 0 -15px; }
.home-recent .scroller__item { padding: 0 15px; }
.home-recent .scroller__dots { padding-top: 20px; }
@media (min-width: 768px) { .home-recent .scroller { --per-view: 2; } }
@media (min-width: 1200px) { .home-recent .scroller { --per-view: 3; } }
@media (max-width: 767.98px) { .home-recent { margin-bottom: 70px; padding: 60px 0; } }