html[data-scroll-comp="car-detail-carousel"] {
  scroll-padding-top: 60px;
  @media (width >= 1024px) {
    scroll-padding-top: 130px;
  }
}

.car-carousel__container {
  padding-right: 0;

  .car-description {
    color: var(--tertiary-black);
    font-family: var(--body-font-family);
    font-size: 1.5rem;
    font-weight: var(--fw-400);
    line-height: 1.875rem;
    margin: 56px 0px 32px;

    @media (width >= 1024px) {
      margin-top: 58px;
      margin-bottom: 37px;
      font-size: 32px;
      font-weight: 500;
      line-height: 2.5rem;
    }
  }
  .car-carousel-slider {
    ul {
      /* gap: 8px; */
      margin-top: 18px;
      align-items: stretch;
      display: flex;
      /* overflow-x: scroll;
      scroll-snap-type: x mandatory;
      scrollbar-width: none; */
      /* width: 94vw; */

      /* @media (width >= 768px) {
        padding-left: 0px;
        gap: 24px;
        padding-right: 0;
        width: 92vw;
      } */

      /* @media (width >= 1024px) {
        width: 94vw;
      }

      @media (width >= 1366px) {
        width: 96vw;
      } */

      li {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        flex-shrink: 1;
        gap: 24px;
        /* scroll-snap-align: center; */

        @media (width >= 768px) {
          flex-shrink: 0;
          gap: 20px;
        }

        /* &.g-sm-4 {
          width: auto;
        } */

        .vjs-v8 {
          width: auto;
          height: auto;

          @media (width >= 768px) {
            width: 100%;
          }

          /* hide video loader */
          .vjs-loading-spinner {
            display: none;
          }
        }

        img,
        video {
          width: 304px;
          height: 500px;

          @media (width >= 768px) {
            width: 100%;
            height: 561px;
          }

          @media (width >= 1024px) {
            height: 299px;
          }

          @media (width >= 1366px) {
            height: 432px;
            padding-bottom: 0;
          }

          @media (width >= 1920px) {
            height: 584px;
          }
        }

        div {
          width: 277px;
          /* height: 40px; */
          display: flex;
          flex-direction: column;

          @media (width>=768px) {
            width: 100%;
            height: 42px;
          }

          @media (width>=1920px) {
            height: 20px;
          }
        }

        p {
          font-family: var(--body-font-arena);
          font-size: 0.75rem;
          line-height: 1rem;
          color: var(--tertiary-black);
          font-weight: var(--fw-400);
          margin: 0;

          @media (width >= 1024px) {
            font-size: 1rem;
            line-height: 20px;
          }

          strong {
            color: var(--tertiary-black);
            font-weight: var(--fw-700);
          }
        }

        .bold-text {
          color: var(--tertiary-black);
          font-weight: var(--fw-700);
        }
      }
    }
  }
  video {
    width: 304px;
    height: 500px;
    padding-bottom: 0.001px;
    object-fit: cover;
  }

  .vjs-poster {
    display: none !important;
  }

  .dot {
    transition: background 0.3s;
    background-image: url('/icons/poc/pagination-not.png');
    width: 100%;
    height: 1px;
  }

  .dot.active {
    background-image: url('/icons/poc/pagination.svg');
  }

  .controls-section {
    position: relative;
    padding-top: 20px;
    padding-bottom: 60px;
    margin-right: 20px;

    @media (width >= 768px) {
      padding-bottom: 65px;
    }

    @media (width >= 1024px) {
      padding-bottom: 44px;
      padding-top: 32px;
      margin-right: 56px;
    }

    .pagination {
      position: absolute;
      top: 10px;
      width: 100%;
      column-gap: 15px;
      display: flex;
      justify-content: space-between;
      margin-top: 10px;

      @media (width >= 1366px) {
        margin-top: 22px;
      }
    }
  }
  .controls {
    display: none;
    height: 32px;
    position: relative;
    z-index: 0;
    @media (width >= 1024px){
      height: 48px;
      display: flex;
      position: absolute;
      width: 100%;
      top: -238px;
    }
    @media (width>=1366px){
      top: -300px;
    }
    
    button {
      border: none;
      background: none;
      height: 2rem;
      width: 2rem;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      z-index: 10;
      filter: invert();
      position: absolute;
      cursor: pointer;
      &:disabled {
        display: none;
      }
      @media (width >=1024px){
        display: flex;
        width: 48px;
        height: 48px;
        position: relative;
        padding: 14.216px 14.216px 14.584px 14.584px;
        background-color: var(--tertiary-white);
        filter: none;
        background-size: 20px;
      }
    }
    .prev-arrow {
      background-image: url(/icons/carousel-arrow-black.png);
      transform: rotate(180deg);
      left: 0;
    }

    .next-arrow {
      background-image: url(/icons/carousel-arrow-black.png);
      right: -56px;
      margin-left: auto;
    }
  }

  &.light {
    background-color: #f8f9f9;

    @media (width >= 1024px) {
      background-color: transparent;
    }

    .car-carousel-slider {
      &ul {
        &li {
          @media (width >= 1920px) {
            gap: 20px;
          }
          &.vjs-v8 {
            @media (width >= 1366px) {
              padding-right: 0;
            }
          }
        }
      }
    }

    .car-description {
      padding: 40px 0 0;
      margin-top: 0;
      margin-bottom: 28px;
      font-size: 16px;
      line-height: 1.25rem;

      @media (width >= 1024px) {
        color: var(--primary-main);
        width: 610px;
        padding-top: 58px;
        margin-bottom: 37px;
        font-size: 32px;
        line-height: 2.5rem;
      }

      @media (width >= 1366px) {
        padding-top: 92px;
        margin-bottom: 58px;
      }

      @media (width >= 1920px) {
        width: 1040px;
        padding-top: 58px;
        margin-bottom: 37px;
      }
    }
    .controls-section {
      position: relative;
      padding-top: 32px;
      padding-bottom: 53px;

      @media (width >= 1366px) {
        padding-top: 44px;
        padding-bottom: 60px;
      }
    }
  }
  &.suzuki_connect {
    background: linear-gradient(228deg, rgba(23, 29, 155, 0.1) 31.52%, rgba(255, 98, 0, 0.1) 111.9%);
    padding-bottom: 20px;
    margin-bottom: 40px;
    @media (width >= 768px){
      margin-bottom: 0px;
    }
     picture {
      padding:16px;
      background: linear-gradient(228deg, rgba(23, 29, 155, 0.10) 31.52%, rgba(255, 98, 0, 0.10) 111.9%);
      display: flex;
      justify-content: center;
      width:100%;
     }
    @media (width >=1024px) {
      padding-bottom: 87px;

      picture {
        background: linear-gradient(228deg, rgba(23, 29, 155, 0.10) 31.52%, rgba(255, 98, 0, 0.10) 111.9%);
        display: flex;
        min-height: 345px;
        width: 100%;
        padding:0px;
        img {
          align-self: center;
          margin: 0 auto;
        }
      }
    }
   
    .car-description {
      display: block;
      font-family: var(--body-font-family);
      color: var(--tertiary-black);
      font-size: 1.5rem;
      line-height: 1.875rem;
      font-style: normal;
      font-weight: var(--fw-700);
      padding: 24px 0px 24px;
      margin: 0;

      @media (width >= 768px){
        padding-block: 41px 31px;
      }

      @media (width >= 1024px){
        font-size: 40px;
        line-height: 48px;
        padding-top: 57px;
        padding-bottom: 59px
      }
    }

    .car-carousel-slider {
      ul {
        margin: 0;
        padding-bottom: 41px;

        @media (width >= 1024px){
          padding-bottom: 87px;
        }

        @media (width >= 1366px){
          gap: 5px;
        }

        li {
          position: relative;
          justify-content: start;
          @media (width < 768px) {
            width:216px;
            margin-right:16px !important;
          }          
          .content {
            width:100%;
          }
          @media (width >=768px){
            gap: 36px;
          }

          @media (width >=1024px){
            gap: 24px;
          }

          @media (width >= 1366px){
            padding-bottom: 0;
            gap: 20px;
            margin-right: 19px !important;
          }

          img, video {
            height: auto;

            @media (width >= 768px){
              height: auto;
            }
            @media (width >= 1024px){
              height: auto;
              width: 100%;
            }
            @media (width >= 1366px){
              height: auto;
            }
            @media (width >= 1920px){
              height: auto;
            }
          }
          div {
            height: auto;
            align-items: center;
          }
          p {
            color: var(--tertiary-black);
            font-weight: var(--fw-300);
            font-size: 0.75rem;
            width: 188px;
            line-height: 1rem;

            @media(width >= 768px){
              width: 231px;
            }

            @media(width >= 1024px){
              font-size: 0.875rem;
              width: 100%;
              font-weight: var(--fw-400);
              line-height: 1.125rem;
            }

            strong{
              font-size: 0.875rem;
              line-height: 1.125rem;
              font-weight: var(--fw-500);
              display: inline-block;
              margin-bottom: 8px;

             @media (width >= 1024px){   
                font-size: 1.5rem;
                font-weight: 600;
                line-height: 1.75rem;
                margin-bottom: 12px;
              }
            }
          }
          .bold-text {
            color: var(--tertiary-black);
            font-family: var(--body-font-arena);
            font-size: 0.875rem;
            font-style: normal;
            font-weight: var(--fw-600);
            line-height: 1.125rem;
            white-space: pre-line;
            display: block;
            margin-bottom: 8px;

            @media (width >= 1024px) {
              line-height: 1.25rem;
            }
          }
        }

        li:last-child{
          @media (width < 768px) {
          padding-right:20px;
          }
        }
      }
    }
    .controls-section,
    .controls,
    .pagination {
      button {
        filter: none;
      }
    }
    
    .controls-section{
      padding: 0;
      .pagination{
        display: none;
      }
    }
    .controls{
      @media (width >= 1024px) {
        top: -350px;
      }
      @media (width >= 1366px) {
        top: -358px;
      }
      @media (width >= 1920px) {
        top: -428px;
      }
    }

    .dot.active {
      filter: none;
    }
  }
  &.zero-opacity {
    .car-description {
      opacity: 0;
      text-wrap: balance;
      transition: opacity 3s;
      &.fade-in {
        opacity: 1;
      }
    }
    .carousel {
      li {
        opacity: 0;
        &:nth-child(1) {
          transform: translateY(calc(50px));
        }
        &:nth-child(2) {
          transform: translateY(calc(75px));
        }
        &:nth-child(3) {
          transform: translateY(calc(100px));
        }
        &:nth-child(4) {
          transform: translateY(calc(125px));
        }
        &:nth-child(5) {
          transform: translateY(calc(150px));
        }
        &:nth-child(6) {
          transform: translateY(calc(175px));
        }
        &:nth-child(7) {
          transform: translateY(calc(200px));
        }
      }
      &.fade-in {
        li {
          animation:
            slide-in-animation 0.5s linear forwards,
            fade-in-animation 0.75s linear forwards;
        }
      }
    }
  }

  .splide__track {
    overflow: hidden;
    position: relative;
    z-index: 0;
  }
  .splide__track--draggable {
    user-select: none;
  }
  .splide__list {
    backface-visibility: hidden;
    display: flex;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }
  .splide__slide {
    backface-visibility: hidden;
    box-sizing: border-box;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    list-style-type: none !important;
    margin: 0;
    position: relative;
  }
  .splide__sr{
    clip:rect(0 0 0 0);
    border:0;
    height:1px;
    margin:-1px;
    overflow:hidden;
    padding:0;
    position:absolute;
    width:1px;
  }
}

@keyframes slide-in-animation {
  to {
    transform: translateY(0);
  }
}

@keyframes fade-in-animation {
  to {
    opacity: 1;
  }
}