@import '../carousel/carousel.component';

.hero {
  &.has-carousel {
    position: relative;
    + .hero-boxy, + .hero-head + .hero-footer {
      z-index: 10;
      overflow: hidden;
    }

    .hero-carousel {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      height: auto;
      border: none;
      margin: auto;
      padding: 0;
      z-index: 0;

      .slider {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        height: 100% !important;
        max-height: 100%;
        z-index: 0;

        .has-background {
          max-height: 100%;

          .is-background {
            object-fit: cover;
            object-position: center center;
            height: 100%;
            width: 100%;
          }
        }
      }
    }

    .hero-body {
      margin: 0.3rem;
      z-index: 10;
    }
  }
}
