.images__container--padding-top {
  padding-top: var(--padding-top-mobile, 0);
}

.images__container--padding-bottom {
  padding-bottom: var(--padding-bottom-mobile, 0);
}

.images__text-area.images__text-area--max-width {
  max-width: 600px;
}

.images__text-area.images__text-area--color {
  color: var(--color-overlay, #FFF);
}

.images__vision-wrapper--overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--opacity-overlay, 0.7);
  background: linear-gradient(357.73deg, var(--background-overlay, #0B1A26) 3.03%, var(--background-overlay-00, #0B1A2600) 31.83%),
   linear-gradient(180deg, var(--background-overlay, #0B1A26) 6.67%, var(--background-overlay-00, #0B1A2600) 105.81%),
   linear-gradient(0deg, var(--background-overlay-45, #0B1A2673), var(--background-overlay-45, #0B1A2673));
  z-index: 2;
  will-change: opacity, transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.images__vision--video {
  container: images-vision / size;
}

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

.images__wrapper-full-width .images__vision-wrapper {
  max-width: none;
}

.video-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--animation-duration, 200ms) var(--transition-function-ease-in-out);
  z-index: 1;
  will-change: opacity;
  opacity: 0;
}

.video-poster-loaded .video-poster {
  opacity: 1;
}

.video-iframe {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity calc(var(--animation-duration, 200ms) + 200ms) var(--transition-function-ease-in-out);
  will-change: opacity;
}

.video-loaded .video-iframe {
  opacity: 1;
}

[data-video-container] {
  position: relative;
  overflow: clip;
  background: #000;
}

.images__date-picker:not(:last-child) {
  margin-bottom: 36px;
}

.images__wrapper .date-picker__instance {
  max-width: 400px;
  margin-left: var(--margin-left-mobile);
  margin-right: var(--margin-right-mobile);
}

.images__wrapper .date-picker__title {
  justify-content: var(--text-justify-content-mobile, flex-start);
}

.palette-one .images__title,
.palette-one .images__description {
  color: var(--color-primary, #0B1A26);
}

.palette-one .images__vision {
  background: var(--background-primary, #FFF);
}

.palette-two .images__title,
.palette-two .images__description {
  color: var(--color-primary-2, #FFF);
}

.palette-two .images__vision {
  background: var(--background-primary-2, #0B1A26);
}

.palette-three .images__title,
.palette-three .images__description {
  color: var(--color-primary-3, #0B1A26);
}

.palette-three .images__vision {
  background: var(--background-primary-3, #F4B841);
}

.images__wrapper.section-with-date-picker .images__container--padding-bottom {
  padding-bottom: calc(var(--padding-bottom-mobile, 40px) + var(--date-picker-block-height, 71px));
}

.images__wrapper.section-with-date-picker:has(.date-picker__title) .images__container--padding-bottom {
  padding-bottom: calc(var(--padding-bottom-mobile, 40px) + var(--date-picker-block-height, 117px));
}

.images__wrapper.section-with-date-picker .images__vision {
  bottom: calc(var(--date-picker-height, 71px) / 2);
}

.palette-one .images__text-area--color .images__title,
.palette-one .images__text-area--color .images__description,
.palette-one .images__text-area--color .images__buttons .button--outlined,
.palette-two .images__text-area--color .images__title,
.palette-two .images__text-area--color .images__description,
.palette-two .images__text-area--color .images__buttons .button--outlined,
.palette-three .images__text-area--color .images__title,
.palette-three .images__text-area--color .images__description,
.palette-three .images__text-area--color .images__buttons .button--outlined {
  color: currentcolor;
}

@media (width >= 992px) {
  .images__container--padding-top {
    padding-top: var(--padding-top, 0);
  }

  .images__container--padding-bottom {
    padding-bottom: var(--padding-bottom, 0);
  }

  .images__wrapper .date-picker__instance {
    margin-left: var(--margin-left, auto);
    margin-right: var(--margin-right, auto);
  }

  .images__wrapper .date-picker__title {
    justify-content: var(--text-justify-content, flex-start);
  }

  .images__wrapper.section-with-date-picker .images__container {
    min-height: calc(var(--height, auto) + var(--date-picker-block-height, 71px) + var(--padding-bottom, 0px));
  }

  .images__wrapper.section-with-date-picker:has(.date-picker__title) .images__container {
    min-height: calc(var(--height, auto) + var(--date-picker-block-height, 117px) + var(--padding-bottom, 0px));
  }

  .images__wrapper.section-with-date-picker .images__container--padding-bottom {
    padding-bottom: calc(var(--padding-bottom, 0px) + var(--date-picker-block-height, 71px));
  }

  .images__wrapper.section-with-date-picker:has(.date-picker__title) .images__container--padding-bottom {
    padding-bottom: calc(var(--padding-bottom, 0px) + var(--date-picker-block-height, 117px));
  }
}

@media (width >= 1248px) {
  .images__text-area {
    padding: 0 var(--padding-no-full-width, 56px);
  }

  .images__wrapper.section-with-date-picker .date-picker__container {
    padding-left: calc(var(--padding-no-full-width, 56px) + var(--horizontal-padding, 16px));
    padding-right: calc(var(--padding-no-full-width, 56px) + var(--horizontal-padding, 16px));
  }

  .images__wrapper-full-width .images__text-area {
    padding: 0;
  }

  .images__wrapper.section-with-date-picker.images__wrapper-full-width .date-picker__container {
    padding-left: var(--horizontal-padding, 16px);
    padding-right: var(--horizontal-padding, 16px);
  }
}

@container images-vision (aspect-ratio > 16 / 9) {
  .images__vision--video .images__video {
    width: 100%;
    height: auto;
  }
}

@container images-vision (aspect-ratio <= 16 / 9) {
  .images__vision--video .images__video {
    width: auto;
    height: 100%;
  }
}