.root {
  width: 100%;
  .v-theme--dark & {
    @include bg-color-darken($palette-primary-light, 0.8)
  }
  .v-theme--light & {
     @include bg-color-lighten($palette-primary-light, 0.8)
  }
  position: relative;
  padding: spacing(10, 0);
  @include breakpoints-down(md) {
    padding-top: $spacing15,
  }
}

.carousel {
  position: relative;
  z-index: 3;
  :deep(.splide__pagination) {
    bottom: $spacing8 * -1;
    li button {
      width: 10px;
      height: 10px;
      transition: width 0.3s ease;
      background: $palette-secondary-light;
      border-radius: 15px;
      margin: spacing(0, 0.5);
      &.is-active {
        width: 35px;
        transform: none;
      }
    }
  }
}

.item {
  padding: $spacing2;
  &:focus {
    outline: none
  }
}

.floating-title {
  position: absolute;
  width: 100%;
  @include left(0);
  top: $spacing5;
  @include breakpoints-up(lg) {
    @include left($spacing3);
    top: $spacing10 * -1
  }
  @media (min-width: 1400px) {
    @include left($spacing10)
  }
  .title {
    @include breakpoints-up(md) {
      @include margin-right($spacing5)
    }
    @include breakpoints-up(lg) {
      @include float(right)
    }
    @media (min-width: 1400px) {
      @include margin-right(-40px)
    }
  }
}

.item-props {
  &-last {
    width: 460px;
    @include breakpoints-down(md) {
      display: none;
      width: 1px;
    }
  }
}
