#cross-sell-carousel {
  width: 100%;

  .cross-sell-carousel-item {
    padding: 35px;

    .carousel-slide {
      background: #fef5ee;
      background-size: contain !important;
      background-position: 100% center !important;
      background-repeat: no-repeat !important;
      padding: 35px;
      border-radius: 16px !important;
      box-shadow: 0px 4px 30px 0px rgba(216, 46, 0, 0.3);
      transition: all 0.3s ease-in;

      @media (max-width: 768px) {
        background: #fef5ee !important;
        padding: 24px;
      }

      .carousel-slide-content {
        width: 50%;
        @media (max-width: 768px) {
          width: 100%;
        }
      }

      .promotion-mobile-bg {
        display: none;
        @media (max-width: 768px) {
          display: block;
          width: calc(100% + 48px);
          margin-left: -24px;
          margin-right: -24px;
          margin-bottom: -24px;
          & img {
            width: 100%;
            display: block;
          }
        }
      }

      .title {
        font-family: "HK-Grostek-Wide";
        font-weight: 700;
        font-size: 24px;
        line-height: 32px;
        letter-spacing: 0%;
        vertical-align: middle;
        text-transform: uppercase;
        color: #000000;
      }

      .description {
        margin-top: 15px;
        font-family: "Roboto";
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0%;
        vertical-align: middle;
      }

      .component.button-arrow {
        margin-top: 43px;
        @media (max-width: 768px) {
          margin-top: 32px;
          margin-bottom: 36px;
        }
      }
    }
  }

  .slick-prev::before,
  .slick-next::before {
    content: none !important;
  }
  .slick-prev,
  .slick-next {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border: none;
    z-index: 10;
    opacity: 1;
  }
  .slick-prev {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg clip-path='url(%23clip0_4821_3561)'%3E%3Cpath d='M19 2.82L16.1457 0L4 12L16.1457 24L19 21.18L9.72874 12L19 2.82Z' fill='%231800E7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4821_3561'%3E%3Crect width='24' height='24' fill='white' transform='matrix(-1 0 0 -1 24 24)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    left: -30px;
  }
  .slick-next {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg clip-path='url(%23clip0_4821_5742)'%3E%3Cpath d='M5 21.18L7.85425 24L20 12L7.85425 0L5 2.82L14.2713 12L5 21.18Z' fill='%231800E7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4821_5742'%3E%3Crect width='24' height='24' fill='white' transform='matrix(-1 0 0 -1 24 24)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    right: -30px;
  }
  .slick-slide {
    opacity: 1;
    transition: opacity 0.5s ease;
    &.fade-out {
      opacity: 0;
    }
  }
  .slick-dots {
    bottom: 0;
    @media screen and (max-width: 767px) {
      margin-bottom: 20px;
      margin-top: 0;
    }
    li {
      display: inline-block;
      margin: 0 4px;
      width: 6px;
      height: 6px;
      transition: all 0.3s ease-in;
      &:only-child {
        display: none;
      }
      button,
      button::before,
      button:before {
        width: 6px;
        height: 6px;
      }
      button {
        opacity: 0.25;
        &::before,
        &:before {
          content: " ";
          display: block;
          background: #1800e7 !important;
          border-radius: 50%;
          transition: all 0.3s ease-in;
          opacity: unset;
          @media screen and (max-width: 767px) {
            background: #1800e7 !important;
          }
        }
      }
      &.slick-active {
        width: 24px;
        opacity: 1;
        button {
          opacity: 1;
          &::before,
          &:before {
            width: 24px;
            height: 6px;
            border-radius: 3px;
            background: #1800e7;
          }
        }
      }
    }
  }
}