.hero-banner {
  position: relative;
  --item-height: auto;
}
.hero-banner .swiper:not(.swiper-initialized) {
  position: relative !important;
  height: 236px;
}
@media (min-width: 768px) {
  .hero-banner .swiper:not(.swiper-initialized) {
    height: 400px;
  }
}
.hero-banner .swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
  display: none;
}
.hero-banner__item {
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: var(--item-height);
  min-height: 31.25vw;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  position: relative;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  transition: initial;
}
.hero-banner__content {
  position: relative;
  z-index: 2;
}
.hero-banner__content .button, .hero-banner__content a.button {
  clear: both;
  margin-bottom: calc(var(--grid-gutter) * 2);
  margin-top: calc(var(--grid-gutter));
}
.hero-banner__headline {
  margin-bottom: 0;
}
.hero-banner__headline > span {
  background-color: rgba(0, 0, 0, 0.6) !important;
  color: #fff;
  display: table;
  padding: 0 var(--grid-gutter);
  font-size: var(--h1-font-size);
  line-height: var(--h1-line-height);
  font-weight: var(--h1-font-weight);
}
.hero-banner__headline--primary > span {
  color: var(--primary);
}
.hero-banner__headline > span > span {
  color: var(--primary);
}
.hero-banner__headline--with-sub > span:first-of-type {
  margin-bottom: calc(var(--grid-gutter) / 2);
}
.hero-banner .swiper-pagination {
  bottom: 20px;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .hero-banner .slider-nav {
    bottom: 20px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .hero-banner .slider-nav button {
    border: 1px solid #fff;
    background: transparent;
  }
  .hero-banner .slider-nav button.tns-nav-active {
    background: var(--slider-pagination-color);
    border-color: var(--slider-pagination-color);
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .hero-banner .tns-controls {
    bottom: 60px;
    top: auto;
  }
}
.hero-banner--dense {
  --item-height: 200px;
}
@media (min-width: 500px) {
  .hero-banner {
    --item-height: 400px;
  }
  .hero-banner--dense {
    --item-height: 400px;
  }
}
@media (min-width: 992px) {
  .hero-banner__content a.button {
    margin-bottom: 0;
  }
}
@media (min-width: 1400px) {
  .hero-banner {
    --item-height: 600px;
  }
  .hero-banner--dense {
    --item-height: 400px;
  }
}
@media (min-width: 1600px) {
  .hero-banner--dense {
    --item-height: 500px;
  }
}
@media (min-width: 1920px) {
  .hero-banner--dense {
    --item-height: 600px;
  }
}
.hero-banner-video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.hero-banner-video .hs-video-wrapper, .hero-banner-video .hs-video-container, .hero-banner-video .hs-video-widget {
  height: 100%;
}
.hero-banner-video .hs-video-wrapper {
  height: 31.25vw !important;
  padding-bottom: 0 !important;
}
.hero-banner .syn-slider {
  height: 236px;
  overflow-y: hidden;
}
@media (min-width: 768px) {
  .hero-banner .syn-slider {
    height: 400px;
  }
  .hero-banner.hero-banner--dense .syn-slider {
    height: 400px
  }
}
@media (min-width: 1400px) {
  .hero-banner .syn-slider {
    height: 600px;
  }
}
@media (min-width: 1600px) {
  .hero-banner.hero-banner--dense .syn-slider {
    height: 500px;
  }
}
@media (min-width: 1920px) {
  .hero-banner.hero-banner--dense .syn-slider {
    height: 600px;
  }
}