.qantic-hero {
  background-image: url("../images/qantic/bg_01_mobile_narrow.png");
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
  position: relative; /* for overlay */
}

/* ensure content stays above overlay */
.qantic-hero > .container {
  position: relative;
  z-index: 1;
}

@media screen and (min-width: 380px) {
  .qantic-hero {
    background-image: url("../images/qantic/bg_01_mobile_wide.png");
  }
}
@media screen and (min-width: 420px) {
  .qantic-hero {
    background-image: url("../images/qantic/bg_01_tablet_narrow.png");
  }
}
@media screen and (min-width: 520px) {
  .qantic-hero {
    background-image: url("../images/qantic/bg_01_tablet_wide.png");
  }
}
@media screen and (min-width: 660px) {
  .qantic-hero {
    background-image: url("../images/qantic/bg_01_desktop_narrow.png");
  }
}
@media screen and (min-width: 800px) {
  .qantic-hero {
    background-image: url("../images/qantic/bg_01_desktop_medium.png");
  }
}
@media screen and (min-width: 992px) {
  .qantic-hero {
    background-image: url("../images/qantic/bg_01_desktop_wide.png");
    background-size: initial;
    background-repeat: repeat-x;
  }
}
@media screen and (min-width: 1921px) {
  .qantic-hero {
    background-size: cover;
  }
}