@layer components {
  .simple-hero-banner__image-bg {
    min-height: 28rem;
  }
  .simple-hero-banner .video {
    min-height: 28rem;
    height: 100%;
  }
  .simple-hero-banner .video .video-player-app {
    height: 100%;
  }
  .simple-hero-banner .video .video-player-app .idx-video-player {
    height: 100%;
  }
  .simple-hero-banner--center .config-text {
    text-align: center;
  }
  .simple-hero-banner--center .config-text__cta-wrapper {
    justify-content: center;
  }
  @media (min-width: 768px) {
    .simple-hero-banner {
      height: 52rem;
    }
    .simple-hero-banner__bg {
      top: 0;
      inset-inline-start: 0;
      overflow: hidden;
      position: absolute;
    }
    .simple-hero-banner__bg::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      inset-inline-start: 0;
      z-index: 1;
      background: var(--gradient-overlay-left);
    }
    .simple-hero-banner--center .simple-hero-banner__bg::before {
      background: var(--ui-images-overlays-popup-overlay);
    }
  }
  @media (min-width: 992px) {
    .simple-hero-banner--full-height {
      height: 100vh;
    }
  }
  @media (min-width: 1200px) {
    .simple-hero-banner {
/*       height: 80vh; */ 
      min-height: 80rem;
    }
    .simple-hero-banner--full-height {
      height: 100vh;
    }
  }
  .simple-hero-banner__content {
    background-color: var(--primary-1-900);
  }
  .carousel-banner {
    z-index: 1;
  }
  .carousel-banner__image-bg {
    min-height: 28rem;
  }
  .carousel-banner .video {
    min-height: 28rem;
  }
  .carousel-banner .video__frame-wrapper {
    pointer-events: none;
  }
  .carousel-banner .carousel-navigation {
    z-index: 2;
    width: 100%;
    inset-inline: 0;
    margin: auto;
  }
  .carousel-banner--arrow .carousel-navigation {
    top: calc(56.25vw + 2.2rem);
    inset-inline: var(--sm-3) auto;
    position: absolute;
  }
  .carousel-banner--arrow .video .action-button {
    bottom: var(--sm-4);
  }
  .carousel-banner--with-share-price {
    overflow: visible;
  }
  .carousel-banner--with-share-price .shareprice-ticker {
    min-height: 19.5rem;
    width: 100%;
  }
  @media (min-width: 768px) {
    .carousel-banner {
      height: 52rem;
    }
    .carousel-banner__bg {
      top: 0;
      inset-inline-start: 0;
      overflow: hidden;
      position: absolute;
      z-index: -1;
    }
    .carousel-banner__bg::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      inset-inline-start: 0;
      z-index: 1;
      background: var(--gradient-overlay-left);
    }
    .carousel-banner .carousel-navigation {
      top: auto;
      bottom: 0;
      position: absolute;
    }
    .carousel-banner--arrow .carousel-navigation {
      top: auto;
      bottom: var(--sm-4);
      inset-inline: auto 6rem;
    }
    .carousel-banner--with-share-price {
      height: auto;
    }
    .carousel-banner--with-share-price .swiper-wrapper {
      max-height: 44rem;
    }
    .carousel-banner--with-share-price .carousel-navigation {
      position: absolute;
    }
    .carousel-banner--with-thumbnails .carousel-banner__bg::before {
      background: linear-gradient(0deg, var(--ui-images-overlays-image-tint) 0%, var(--ui-images-overlays-image-tint) 100%);
    }
    .carousel-banner--with-thumbnails .gallery-thumbs {
      overflow: hidden;
      border-radius: var(--card-border-radius);
    }
    .carousel-banner--with-thumbnails .gallery-thumbs .swiper-slide {
      flex: 1;
      cursor: pointer;
      background: var(--card-bg);
      color: var(--card-title);
      box-shadow: inset 0 0 0 calc(var(--card-border-weight) * 1px) var(--card-border-colour), 0 var(--card-shadow-offset) var(--card-shadow-blur) 0 var(--card-shadow-colour);
      transition: all 0.25s ease-in-out;
    }
    .carousel-banner--with-thumbnails .gallery-thumbs .swiper-slide:hover {
      background: var(--card-hover-bg);
      color: var(--card-hover-fg);
      box-shadow: inset 0 0 0 calc(var(--card-border-weight) * 1px) var(--card-hover-border), 0 var(--card-hover-shadow-offset) var(--card-hover-shadow-blur) 0 var(--card-hover-shadow-colour);
    }
    .carousel-banner--with-thumbnails .gallery-thumbs .swiper-slide.swiper-slide-thumb-active {
      background: var(--card-active-bg);
      color: var(--card-active-fg);
      box-shadow: inset 0 0 0 calc(var(--card-border-weight) * 1px) var(--card-active-border), 0 var(--card-shadow-offset) var(--card-shadow-blur) 0 var(--card-shadow-colour);
    }
  }
  @media (min-width: 992px) {
    .carousel-banner {
      height: 80rem;
    }
    .carousel-banner--arrow .carousel-navigation {
      inset-inline: auto 0;
      bottom: 0;
    }
    .carousel-banner--arrow .video .action-button {
      bottom: 5.6rem;
    }
    .carousel-banner--full-height {
      height: 100vh;
    }
    .carousel-banner--with-share-price {
      overflow: visible;
    }
    .carousel-banner--with-share-price .swiper-wrapper {
      max-height: none;
    }
    .carousel-banner--with-share-price .shareprice-ticker {
      position: absolute;
      z-index: 1;
      bottom: 0;
      inset-inline-end: var(--sm-3);
      transform: translateY(50%);
      max-height: 36rem;
      max-width: 35.2rem;
      min-height: auto;
    }
    .carousel-banner--with-thumbnails .gallery-thumbs {
      position: absolute;
      margin-top: -12rem;
      inset-inline-end: 0;
    }
    .carousel-banner--with-thumbnails .gallery-thumbs .swiper-slide {
      flex: none;
      max-width: 24.8rem;
    }
    .carousel-banner--with-thumbnails .video .action-button {
      bottom: 13.6rem;
    }
  }
  @media (min-width: 1200px) {
    .carousel-banner {
      height: 80vh;
      min-height: 60rem;
    }
  }
}