.slider--two-tiles {
  .slideshow__slide {
    flex-direction: row;

    @media screen and (min-width: 991px) {
      height: 100%;
    }
  }

  .slideshow__text-wrapper {
    flex-basis: 100%;

    @media screen and (min-width: 991px) {
      flex-basis: 50%;
    }

    @media screen and (min-width: 1200px) {
      flex-basis: 25%;
    }
  }
}

.slider__second-tile {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;

  @media screen and (min-width: 991px) {
    flex-direction: row;
    gap: 1rem;
  }

  > slideshow-component {
    flex-basis: 100%;
    width: 100%;
    border-radius: 2rem;
    overflow: hidden;

    @media screen and (min-width: 991px) {
      flex-basis: 65%;
      width: 65%;
    }

    @media screen and (min-width: 1200px) {
      flex-basis: 70%;
      width: 70%;
    }

    .slideshow.banner {
      @media screen and (min-width: 991px) {
        height: 100%;
      }
    }

    .slideshow__media {
      aspect-ratio: 360 / 237;
      height: unset !important;

      @media screen and (min-width: 749px) {
        height: 100% !important;
      }
    }

    .slideshow__text-wrapper {
      display: none;
    }

    .slideshow__controls {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
  }

  .color-scheme-1.slider__second-tile__text {
    border: 1px solid var(--color-primary-b);
  }

  .slider__second-tile__text {
    flex-basis: 100%;
    width: 100%;
    display: flex;
    overflow: hidden;
    border-radius: 2rem;

    @media screen and (min-width: 991px) {
      flex-basis: 35%;
      width: 35%;
    }

    @media screen and (min-width: 1200px) {
      flex-basis: 30%;
      width: 30%;
    }

    slideshow-component {
      width: 100%;
    }

    .banner__media {
      display: none;
    }

    .slideshow.banner {
      min-height: unset;
      flex: 1;
      justify-content: flex-start;
      align-items: flex-start;

      @media screen and (min-width: 991px) {
        height: 100%;
      }
    }

    .slideshow__text-wrapper {
      padding: 2rem 2rem 0;
      min-width: 100%;

      @media screen and (min-width: 991px) {
        padding: 4rem 4rem 6rem;
      }
    }

    .slideshow__text.banner__box {
      padding: 0;
      min-width: unset;
      max-width: unset;
      width: 100%;
      height: 100%;

      .banner__buttons {
        margin-top: 6rem;
        margin-bottom: 6rem;

        @media screen and (min-width: 991px) {
          margin-top: auto;
          margin-bottom: 0;
        }

        .button {
          padding: 2rem 3.2rem;
          line-height: 100%;
          height: unset;
          max-height: unset;
          border-radius: 6rem;
        }

        .button::before,
        .button::after {
          border-radius: 6rem;
        }
      }
    }

    .banner__heading {
      margin: 2rem 0 0;
      font-weight: 600;

      * {
        font-weight: 600;
      }
    }

    .banner__text {
      margin: 2rem 0 0;

      @media screen and (min-width: 991px) {
        margin: 2rem 0 8.5rem;
      }

      * {
        font-size: 2rem;
        line-height: 3.2rem;
      }
    }

    .slider-buttons {
      display: flex;
      gap: 1rem;
      margin-bottom: 2rem;
      margin-top: auto;
      justify-content: flex-start;
    }

    .slider-button {
      background: var(--color-primary);
      border: none;
      border-radius: 0.8rem;
      width: 3.6rem;
      height: 3.6rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      scale: 1;
      transition: scale var(--duration-default) var(--ease-out-slow);
    }

    .slider-button:hover:not([disabled]) {
      scale: 1.1;
    }

    .slider-button[disabled] {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .slider-button svg {
      width: 1rem;
      height: 1rem;
      color: #fff;
    }

    .slider-button--prev svg {
      transform: rotate(90deg);
    }

    .slider-button--next svg {
      transform: rotate(-90deg);
    }

    .slider-button .svg-wrapper {
      width: 2.4rem;
      height: 2.4rem;
    }

    .slider-button .svg-wrapper svg {
      width: 1.2rem;
      height: 1.2rem;
    }

    .slider-progress {
      height: 4px;
      border-radius: 2px;
      overflow: hidden;
      width: 100%;
      display: flex !important;
    }

    .slider-progress__fill {
      height: 100%;
      background: #7ED321;
      border-radius: 2px;
      transition: width 0.3s ease;
      width: 33.33%;
      display: flex !important;
    }

    .slideshow__controls {
      padding-left: 2rem;
      padding-right: 2rem;
      margin-bottom: 1.6rem;

      @media screen and (min-width: 991px) {
        padding-left: 4rem;
        padding-right: 4rem;
        margin-bottom: 3.6rem;
      }

      .slider-counter {
        display: block;
        min-width: max-content;
      }

      .slider-counter--total,
      span[aria-hidden=true] {
        opacity: 0.8;
      }

      span {
        font-size: 1.5rem;
      }
    }
  }
}