.slide-show-with-items-container {
  margin-left: -$padding-padding-xs;
  margin-right: -$padding-padding-xs;

  .slide-show-item-content {
    position: relative;
    .image-container {
      z-index: 1;
      position: relative;
      img {
        width: 100%;
        height: auto;
        display: block;
        position: relative;
        z-index: 1;
      }
      &:before {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        content: "";
        z-index: 2;
        background: linear-gradient(
          360deg,
          rgba(0, 0, 0, 0.8) 0%,
          rgba(0, 0, 0, 0) 40.38%
        );
        mix-blend-mode: normal;
        opacity: 0.69;
      }
    }
    .text-container {
      bottom: rem-calc(48);
      padding-bottom: $padding-padding-lg;
      padding-left: $padding-padding-lg;
      padding-right: $padding-padding-lg;
      position: absolute;
      z-index: 2;
      max-height: 85%;
      overflow: hidden;;
      @include media-breakpoint-up(md) {
        bottom: rem-calc(40);
        padding-left: $padding-padding-xxlg;
        padding-right: $padding-padding-xxlg;
        padding-bottom: 0;
        max-height: none;
      }
      .container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        @include media-breakpoint-up(md) {
          align-items: flex-start;
          flex-direction: column;
          justify-content: space-between;
        }
        .title {
          @include text-style-headline-h-1;
          color: $white;
          margin: 0;
          text-align: left;
          width: 100%;
          &.title-padding-bottom {
            margin-bottom: rem-calc(25);
            @include media-breakpoint-up(md) {
              margin-bottom: rem-calc(70);
            }
          }
        }
        .btn {
          margin-top: $padding-padding-lg;
          @include media-breakpoint-up(md) {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  ul.slick-dots {
    bottom: rem-calc(24);
    right: rem-calc(44);
    z-index: 99;
    width: auto;
    position: absolute;
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    @include media-breakpoint-up(md) {
      bottom: rem-calc(40);
      right: rem-calc(60);
    }
    li {
      position: relative;
      width: rem-calc(16);
      height: rem-calc(16);
      margin: 0 rem-calc(5) rem-calc(5);
      padding: 0;
      cursor: pointer;
      display: inline-block;
      vertical-align: top;
      button {
        background-color: $white;
        border: rem-calc(1) solid $white;
        border-color: $white;
        border-radius: 50%;
        color: transparent;
        cursor: pointer;
        display: block;
        font-size: 0;
        line-height: 0;
        outline: none;
        width: inherit;
        height: inherit;
        padding: $padding-padding-xxxs;
        &:before {
          display: none;
        }
        &:hover,
        &:focus-visible {
          outline: $focus-ring-color auto 1px;
        }
      }
      &.slick-active {
        button {
          background: $primary;
          border-color: $primary;
          border: rem-calc(1) solid $primary;
        }
      }
    }
  }
  .play-pause-container {
    bottom: rem-calc(-9.6);
    right: rem-calc(24);
    margin-right: 0;
    height: rem-calc(16);
    width: rem-calc(16);
    .play-btn,
    .pause-btn {
      &:hover,
      &:focus-visible {
        outline: $focus-ring-color auto 1px;
      }
    }
    .play-btn {
      width: inherit;
      height: inherit;
    }
    .pause-btn {
      width: inherit;
      height: inherit;
    }
    @include media-breakpoint-up(md) {
      right: rem-calc(40);
      bottom: rem-calc(5.28);
    }
  }
}
