/*!**********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./blocks/video-hero/video-hero.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************/
/*
A simple little SCSS mixin for creating scrim gradients
Inspired by Andreas Larson - https://github.com/larsenwork
https://css-tricks.com/easing-linear-gradients/
*/
.video-hero {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #0F2027 0.24%, #203A43 49.49%, #2C5364 99.69%);
  position: relative;
  overflow: hidden;
}
@media (max-width: 767px) {
  .video-hero {
    height: auto;
  }
}
.video-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}
.video-hero--top-scrim::after {
  background: linear-gradient(to bottom, hsla(0, 0%, 0%, 0.7) 0%, hsla(0, 0%, 0%, 0.5166) 19%, hsla(0, 0%, 0%, 0.3787) 34%, hsla(0, 0%, 0%, 0.2674) 47%, hsla(0, 0%, 0%, 0.1946) 56.5%, hsla(0, 0%, 0%, 0.1358) 65%, hsla(0, 0%, 0%, 0.0882) 73%, hsla(0, 0%, 0%, 0.0525) 80.2%, hsla(0, 0%, 0%, 0.0294) 86.1%, hsla(0, 0%, 0%, 0.0147) 91%, hsla(0, 0%, 0%, 0.0056) 95.2%, hsla(0, 0%, 0%, 0.0014) 98.2%, hsla(0, 0%, 0%, 0) 100%);
  opacity: 1;
  bottom: auto;
  height: 10%;
}
.video-hero iframe,
.video-hero video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  position: relative;
  z-index: 1;
  max-height: 100vh;
  aspect-ratio: var(--video-hero-aspect-ratio, 16/9);
}
.video-hero iframe img,
.video-hero video img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.video-hero--has-fallback {
  min-height: 1px;
}
.video-hero--has-fallback iframe,
.video-hero--has-fallback video {
  position: absolute;
  inset: 0;
}
.video-hero__no-video {
  color: #FFFFFF;
}
.video-hero__fallback {
  aspect-ratio: var(--video-hero-aspect-ratio, 16/9);
  display: block;
  height: auto;
  width: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  max-height: 100vh;
}
.video-hero__fallback-picture {
  display: block;
  width: 100%;
}

/*# sourceMappingURL=video-hero.min.css.map*/