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

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

.hero > .hero__container {
  display: flex;
}

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

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

.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: center;
  text-align: var(--text-align-mobile);
  margin: 0 var(--margin-right-mobile) 0 var(--margin-left-mobile);
}

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

.hero__title {
  font-size: var(--font-size-h3);
}

.hero__title * {
  font-family: var(--font-heading);
}

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

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

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

.hero__button {
  margin-left: 8px;
  margin-right: 8px;
  width: calc(100% - 16px);
}

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

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

.hero__vision-wrapper--desktop {
  display: none;
}

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

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

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

.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);
}

.hero .transition__sketch--top {
  transform: scale(-1, 1);
}

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

@media (min-width: 428px) {
  .hero__container {
    min-height: 560px;
  }
}

@media (min-width: 667px) {
  .hero__button {
    width: auto;
  }
}

@media (min-width: 768px) {
  .hero__vision-wrapper--desktop {
    display: block;
  }

  .hero__vision-wrapper--mobile {
    display: none;
  }
}

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

  .header-transparent ~ main .hero__wrapper {
    min-height: calc(var(--height, auto) - var(--top-bar-height, 35px));
  }

  .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--mobile {
    display: none;
  }

  .hero__vision-wrapper--overlay:after {
    background: linear-gradient(var(--overlay-direction), var(--background-overlay) 25.94%, var(--background-overlay-00) 100%);
  }

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

  .hero__title {
    font-size: var(--font-size-h1);
    margin-bottom: 34px;
  }

  .hero__buttons {
    margin-top: 0;
  }
}

@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%;
  }
}