/* General font-size */
/* Titles */
/* Required for Bootstrap grid */
/* Screen size */
/* Arsenal's tablet-up */
/* Foundation's large-up breakpoint */

.hero-banner {
  margin-bottom: 40px;
  padding-top: 40px;
  padding-bottom: 40px;
}

@media screen and (min-width: 768px) {
  .hero-banner {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}

@media screen and (min-width: 992px) {
  .hero-banner {
    padding-bottom: 150px;
  }
}

.hero-banner > .img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  margin-bottom: 40px;
  position: relative;
  z-index: 5;
}

@media screen and (max-width: 991px) {
  .hero-banner > .img {
    background-image: none !important;
  }
}

@media screen and (min-width: 768px) {
  .hero-banner > .img {
    background-position: left center;
    background-size: auto 100%;
    height: 100%;
    left: 52%;
    margin-bottom: 0;
    position: absolute;
    top: 0;
    width: 48%;
  }
}

.hero-banner > .img img {
  display: block;
}

@media screen and (min-width: 768px) {
  .hero-banner > .img img {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .hero-banner .is-background:not([class*="has-gradient-"]) {
    background-image: none !important;
  }
}

.hero-banner .is-intro {
  font-size: 16px;
}

@media screen and (min-width: 768px) {
  .hero-banner .is-intro {
    font-size: 20px;
  }

.hero-banner {
  position: relative;
}

.hero-banner .is-background {
  position: absolute;
  inset: 0;          /* top:0 right:0 bottom:0 left:0 */
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-banner > .xl-container {
  position: relative;
  z-index: 1;
}

.hero-banner .row > .col-md-6:first-child {
  padding-top: 40px;
  padding-bottom: 40px;
}