/* Hero outer wrapper */
.vsc-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding-top: 96px;
  padding-bottom: 96px;
  box-sizing: border-box;
}

/* Hero Deep Class Modifier */
.vsc-hero.vsc-hero-deep {
  min-height: 400px;
}

/* Image background */

.vsc-hero__image,
.vsc-hero__image-carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.vsc-hero__image img,
.vsc-hero__image-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Video background */
.vsc-hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.vsc-hero__video-embed-container {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 400px;
  padding-left: calc((400px / 9) * 16); /* Calc 16:9 landscape aspect ratio based on fixed height */
  transform: translate(-50%, -50%);
}

.vsc-hero__video-embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Image carousel container */
.vsc-hero__image-carousel {
  overflow: hidden;
}

/* Carousel Outer Wrapper */
.vsc-hero__image-carousel .vsc-carousel-wrapper {
  height: 100%;
}

/* Content container */
.vsc-hero__content-container {
  position: relative;
}

/* Page title dark overlay container */
.vsc-hero__page-title-dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba($palette--black, 0.2);
  z-index: 1;
}

/* Page title container */
.vsc-hero__page-title {
  position: relative;
  z-index: 1;
}

/* Page title content */
.vsc-hero__page-title-content h1 {
  color: #fff;
  text-align: center;
  text-shadow: 0 0 16px #000;
  margin-bottom: 0;
}

/* Tagline and Search overlay container */
.vsc-hero__tagline-search {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

/* Tagline and Search Bar */
.tagline-search-bar {
  background-color: rgba(255, 255, 255, 0.85);
  padding: 8px;
}

.tagline-search-bar h2 {
  margin-bottom: 0;
}


@media (max-width: 991px) {

  /* Remove gutter from Tagline Search on mobile */
  .vsc-hero__tagline-search .gutter--responsive-padding {
    padding-left: 0;
    padding-right: 0;
  }
}


@media (min-width: 640px) {

  /* Video background */
  .vsc-hero__video-embed-container {
    height: calc((768px / 16) * 9); /* Calc 16:9 landscape aspect ratio based on fixed width */
    padding-left: 768px;
  }
}


@media (min-width: 768px) {

  /* Hero outer wrapper */
  .vsc-hero {
    min-height: 420px;
  }

  /* Hero Deep Class Modifier */
  .vsc-hero.vsc-hero-deep {
    min-height: 520px;
  }

  /* Video background */
  .vsc-hero__video-embed-container {
    height: calc((992px / 16) * 9); /* Calc 16:9 landscape aspect ratio based on fixed width */
    padding-left: 992px;
  }
}


@media (min-width: 992px) {

  /* Hero outer wrapper */
  .vsc-hero {
    min-height: 460px;
    padding-top: 128px;
    padding-bottom: 128px;
  }

  /* Hero Deep Class Modifier */
  .vsc-hero.vsc-hero-deep {
    min-height: 640px;
  }

  /* Video background */
  .vsc-hero__video-embed-container {
    height: calc((1200px / 16) * 9); /* Calc 16:9 landscape aspect ratio based on fixed width */
    padding-left: 1200px;
  }

  /* Page title content */
  .vsc-hero__page-title-content h1 {
    text-shadow: 0 0 24px #000;
  }

  /* Tagline and Search overlay container */
  .vsc-hero__tagline-search {
    bottom: 24px;
  }

  /* Tagline and Search Bar */
  .tagline-search-bar {
    padding: 16px 16px 16px 24px;
  }
}


@media (min-width: 1200px) {

  /* Video background */
  .vsc-hero__video-embed-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 100%;
    height: auto;
    height: 400px;
    padding-left: 0;
    padding-bottom: calc((9 / 16) * 100%); /* Calc 16:9 landscape aspect ratio based on full width */
    transform: translate(-50%, -50%);
  }
}