@use 'variable/breakpoint' as *;
.hero-1-v1 {
  height: calc(100vh - 50px);
  ::ng-deep {
    .swiper-container {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      .swiper-slide {
        .active-toolbar {
          position: static;
        }
      }
    }
    .relative {
      position: static;
    }
    .base-text {
      padding: 0 20px;
      img {
        transform: translate(0px, 0px) !important;
      }
      .text-body {
        max-width: 800px;
      }
    }
  }
  @media #{$lt-md} {
    height: 60vh;
    ::ng-deep {
      .swiper-slide {
        > * {
          top: 50%;
          position: absolute;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  @media #{$gt-sm} {
    height: calc(100vh - 110px);
    min-height: 700px;
    ::ng-deep {
      .base-text {
        overflow: visible;
      }
    }
  }
}

:host-context(.full-screen) {
  .hero-1-v1 {
    height: 100vh;
  }
}
