/* Extra Small (xs) */

.landing {
  --bg-image-url-xs: url("../../assets/img/headers/landing@xs.webp");
  --bg-image-url-sm: url("../../assets/img/headers/landing@sm.webp");
  --bg-image-url-md: url("../../assets/img/headers/landing@md.webp");
  --bg-image-url-lg: url("../../assets/img/headers/landing@lg.webp");
  --bg-image-url-xl: url("../../assets/img/headers/landing@xl.webp");
}

.careers {
  --bg-image-url-xs: url("../../assets/img/headers/careers@xs.webp");
  --bg-image-url-sm: url("headers/careers@sm.webp");
  --bg-image-url-md: url("headers/careers@md.webp");
  --bg-image-url-lg: url("../../assets/img/headers/careers@lg.webp");
  --bg-image-url-xl: url("../../assets/img/headers/careers@xl.webp");
}

.responsive-header {
  width: 100%;
  max-width: 100%;
  background: linear-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 22%, rgba(0,0,0,0.35)), var(--bg-image-url-xs) top / cover;
  padding-bottom: 50px;
}

/* Small (sm) */

@media (min-width: 576px) {
  .responsive-header {
    background-image: linear-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 22%, rgba(0,0,0,0.35)), var(--bg-image-url-sm) top / cover, #000000;
    width: 100%;
    max-width: 100%;
    padding-bottom: 50px;
  }
}

/* Medium (md) */

@media (min-width: 768px) {
  .responsive-header {
    background-image: linear-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 22%, rgba(0,0,0,0.35)), var(--bg-image-url-md) top / cover, #000000;
    width: 100%;
    max-width: 100%;
    padding-bottom: 50px;
  }
}

/* Large (lg) */

@media (min-width: 992px) {
  .responsive-header {
    background-image: linear-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 22%, rgba(0,0,0,0.35)), var(--bg-image-url-lg) top / cover, #000000;
    width: 100%;
    max-width: 100%;
    padding-bottom: 50px;
  }
}

/* Extra Large (xl) */

@media (min-width: 1200px) {
  .responsive-header {
    background-image: linear-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 22%, rgba(0,0,0,0.35)), var(--bg-image-url-xl) top / cover, #000000;
    width: 100%;
    max-width: 100%;
    padding-bottom: 50px;
  }
}