.hero__wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: var(--height-mobile);
}

.hero__container {
  min-height: 100%;
  width: 100%;
}

.hero > .hero__container {
  display: flex;
}

.hero__container .hero__wrapper {
  border-radius: var(--border-radius-block);
  padding-right: var(--horizontal-padding-mobile);
  padding-left: var(--horizontal-padding-mobile);
  overflow: hidden;
  height: auto;
}

.hero__container > .hero__wrapper,
.hero__wrapper > .hero__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__wrapper > .hero__container,
.hero__wrapper > .hero__text-area {
  position: relative;
  z-index: 1;
}

.hero__wrapper--padding-top {
  padding-top: var(--padding-top-mobile);
}

.hero__wrapper--padding-bottom {
  padding-bottom: var(--padding-bottom-mobile);
}

.hero__content {
  color: var(--color-primary);
}

.hero__text-area {
  height: 100%;
  display: flex;
  justify-content: var(--text-justify-content-mobile);
  align-items: var(--text-align-items-mobile);
  text-align: var(--text-align-mobile);
  margin: 0 var(--margin-right-mobile) 0 var(--margin-left-mobile);
}

.hero__text-area--max-width {
  max-width: 550px;
}

.hero__description:not(:last-child) {
  padding: 0 0 23px;
}

.hero__description:last-child {
  padding-bottom: 0;
}

.hero__text-area:not(.hero__text-area--max-width) .hero__description.bq-content p + p {
  margin: 0;
}

.hero__buttons {
  margin: 32px -8px calc(-1 * var(--button-margin-bottom));
}

.hero__button {
  margin-left: 8px;
  margin-right: 8px;
}

.hero__vision {
  background: var(--background-primary);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: -1;
}

.hero__vision--video {
  container: hero-vision / size;
}

.hero__vision-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

.hero__vision-wrapper--overlay:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: var(--opacity-overlay);
  background: var(--linear-gradient-mobile);
}

.hero__image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.hero__video {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  aspect-ratio: 16 / 9;
  max-width: none;
  object-fit: cover;
}

.hero__text-area--color .hero__content,
.hero__text-area--color .hero__title,
.hero__text-area--color .hero__buttons .button--outlined {
  color: var(--color-overlay);
}

@media (min-width: 992px) {
  .hero__wrapper {
    min-height: calc(var(--height) - var(--header-height, 110px));
  }

  .hero__wrapper--padding-top {
    padding-top: var(--padding-top);
  }

  .hero__wrapper--padding-bottom {
    padding-bottom: var(--padding-bottom);
  }

  .hero__vision-wrapper {
    display: block;
  }

  .hero__vision-wrapper--overlay:after {
    background: var(--linear-gradient);
  }

  .hero__text-area {
    justify-content: var(--text-justify-content);
    align-items: var(--text-align-items);
    text-align: var(--text-align);
    margin: 0 var(--margin-right) 0 var(--margin-left);
  }

  .hero__buttons {
    margin-top: 52px;
  }
}

@media (min-width: 1200px) {
  .hero__container .hero__wrapper {
    padding-right: var(--horizontal-padding);
    padding-left: var(--horizontal-padding);
  }
}

@container (aspect-ratio > 16 / 9) {
  .hero__vision--video .hero__video {
    width: 100%;
    height: auto;
  }
}

@container (aspect-ratio <= 16 / 9) {
  .hero__vision--video .hero__video {
    width: auto;
    height: 100%;
  }
}