.car-cards-v2 {
  .car-cards-wrapper {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--tertiary-white);

    .title {
      color: var(--tertiary-black);
      font-family: var(--body-heading-font-family);
      font-size: var(--heading-font-15-mob-sub-heading);
      font-style: normal;
      font-weight: var(--fw-700);
      line-height: var(--heading-lh-19-mob-text-small);
      letter-spacing: 0.64px;
      margin: 0 0 24px;
    }

    .subtitle {
      color: var(--tertiary-black);
      font-size: var(--heading-font-20-mob-text);
      font-style: normal;
      font-weight: var(--fw-300);
      line-height: var(--heading-lh-19-mob-display);
      margin-top: 0;
    }
  }

  .card-clip {
    overflow: hidden;
    width: 100%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;

    .disclaimer {
      color: var(--tertiary-black);
      font-size: var(--heading-font-19-mob-text-small);
      font-weight: var(--fw-400);
      padding: 8px 0 16px;
    }
  }

  .car-cards-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .card-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;

    .splide__track {
      overflow: visible;
    }

    .carousel.splide__list {
      display: flex;
      flex-direction: row;
      gap: unset;
      align-items: unset;

      &:has(> :only-child) {
        .car-image{
          @media (width >= 1024px) {
            width: 560px;
            top:28px;
            right: 24px;
            img {
              max-width: 560px;
            }
          }
        }
      }

    }

    .controls-section {
      display: block;

      &.hide-nav {
        display: none;
      }

      .splide__arrows {
        display: flex;
        justify-content: end;
        gap: 15px;
        margin-top: 16px;
        @media (width >= 1024px) {
          margin-top: 0;
        }
      }

      .next-arrow,
      .prev-arrow {
        background: url('/icons/arrow-left-blue.svg') no-repeat center;
        cursor: pointer;
        padding: 14px;
        width: 24px;
        height: 24px;
        border: 1px solid var(--primary-blue-700, #171d9b);
      }

      .next-arrow {
        rotate: 180deg;
      }

      .next-arrow:disabled,
      .prev-arrow:disabled {
        color: var(--inactive-content);
        pointer-events: none;
        opacity: 0.5;
      }
    }
  }

  .car-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--light-grey-shade-5);
  }

  .car-details {
    .fuel-transmission-wrapper {
      margin-top: 16px;

      .car-fuel-title,
      .car-transmission-title {
        font-size: var(--heading-font-11-mob-text-small);
        line-height: var(--heading-lh-19-mob-display);
        font-weight: var(--fw-400);
        color: var(--inactive-content);
      }

      .car-fuel-value,
      .car-transmission-value {
        font-size: var(--heading-font-11-mob-text-small);
        line-height: var(--heading-lh-19-mob-display);
        font-weight: var(--fw-500);
        margin-top: 4px;
        margin-bottom: 0;
      }

      p {
        margin: 0;
      }
    }
  }

  .car-card-content {
    position: relative;
    padding: 8px 8px 16px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--tertiary-black);
    scroll-margin-top: 114px;

    &.hide-section {
      & .car-details {
        .north-east_arrow,
        .fuel-transmission-wrapper,
        .price-wrapper {
          display: none;
        }
      }

      .card-link,
      .book-a-test-drive {
        display: none;
      }

      .title-link-container {
        pointer-events: none;
      }
    }

    .book-a-test-drive {
      font-family: var(--font-primary-nexa);
      width: fit-content;
      display: block;
      text-align: center;
      font-size: var(--heading-font-20-mob-text);
      font-weight: var(--fw-400);
      line-height: var(--heading-lh-4--mob-text-medium);
      margin-top: 20px;
      padding: 8px 16px;
      background-color: var(--primary-blue-700);
      color: var(--secondary-gray-20);
      border: 1px solid var(--primary-blue-700);
    }

    .car-details {
      width: 100%;

      .car-row {
        display: flex;
        flex-direction: row;
        gap: 56px;

        &.title-wrapper {
          justify-content: space-between;

          .north-east_arrow {
            width: 36px;
            height: 36px;
            background: url(/icons/blue_north_east_arrow.svg) no-repeat center / contain;
          }
        }
      }
    }
  }

  .car-price {
    color: var(--tertiary-black);
    min-width: 95px;
    margin-top: 16px;

    .car-price-label {
      font-weight: var(--fw-400);
      font-size: var(--heading-font-11-mob-text-small);
      line-height: var(--heading-lh-19-mob-display);
      color: var(--inactive-content);
    }

    p {
      margin: 0;
    }

    b {
      font-weight: var(--fw-600);
      font-size: var(--heading-font-15-mob-sub-heading);
      line-height: var(--heading-lh-1--mob-display);
    }
  }

  .car-title-wrapper {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: -15px;
      height: 1px;
      width: 320px;
      background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 50%, rgba(0, 0, 0, 0) 100%);
    }
  }

  .car-preTitle,
  .car-tagline {
    color: var(--tertiary-black);
    font-family: var(--body-heading-font-family);
    font-size: var(--heading-font-19-mob-text-small);
    font-style: italic;
    font-weight: var(--fw-300);
    line-height: var(--heading-lh-19-mob-display);
    margin: 0;
  }

  .car-title {
    font-family: var(--body-heading-font-family);
    font-size: var(--heading-font-15-mob-sub-heading);
    font-weight: var(--fw-700);
    color: var(--tertiary-black);
    line-height: var(--heading-lh-19-mob-text-small);
    display: flex;
    height: 28px;
    align-items: center;
    margin: 0;
  }

  .car-image {
    position: absolute;
    width: 150px;
    right: 0;
    top: 160px;

    img {
      width: 100%;
    }
  }

  .car-inn-mob {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    .car-image {
      margin-top: 0;
    }
  }

  .clip {
    background: linear-gradient(228.24deg, rgba(23, 29, 155, 0.1) 31.52%, rgba(255, 98, 0, 0.1) 111.9%);
    height: inherit;
  }

  @media (width >= 1024px) {
    .car-cards-header {
      flex-direction: row;
      margin-bottom: 64px;
    }

    .card-section {
      .controls-section {
        .next-arrow,
        .prev-arrow {
          padding: 24px;
        }
      }
    }

    .card-clip {
      font-family: var(--body-heading-font-family);
      padding-top: 96px;
      padding-bottom: 56px;

      .title {
        font-size: var(--heading-font-3-des);
        font-weight: var(--fw-700);
        line-height: var(--heading-lh-16-des-display);
        letter-spacing: 0.96px;
        color: var(--tertiary-black);
        margin-bottom: 0;
      }

      .disclaimer {
        padding: 24px 0 0 0;
      }

      .clip.is-active {
        background: linear-gradient(228.24deg, rgba(23, 29, 155, 0.1) 31.52%, rgba(255, 98, 0, 0.1) 111.9%);
        width: 66%;
      }

      .clip.is-active.only-one-card {
        width: 100%;
      }

      .clip:not(.is-active) {
        width: 36%;
        padding: 0 24px;
        background: none;

        > div {
          height: 100%;
        }

        .car-card {
          clip-path: unset;
          height: 61.5%;
          padding: 24px 15px 16px 24px;

          .car-card-content {
            padding: 0;
            height: 100%;
          }
        }

        .car-preTitle {
          display: none;
        }

        .car-title-wrapper::after {
          width: 275px;
        }

        .title-wrapper {
          position: absolute;
          top: 0;
          width: calc(100% - 32px);
          justify-content: space-between;
        }
      }
    }

    .controls-section .splide__arrows {
      position: absolute;
      top: -110px;
      right: 0;
    }

    .car-card {
      min-height: 300px;
      padding: 40px 24px 24px 40px;
      overflow: visible;
      clip-path: polygon(calc(77% - 1.125rem) 0.7rem, 77% 0, 100% 0, 100% 100%, 0 100%, 0 0.7rem);
    }

    .car-card-content {
      flex-direction: row;
      align-items: flex-start;
      color: var(--tertiary-black);
      padding: 0;

      &.hide-section {
        flex-direction: column;

        .car-image {
          width: auto;
          padding-top: 120px;

          img {
            width: 78%;
          }
        }
      }
    }

    .car-details {
      width: auto;

      .car-row {
        flex-direction: row;
        gap: unset;

        &.title-wrapper {
          position: absolute;
          width: 100%;
          top: 0;
        }

        .car-fuel-wrapper {
          border-right: 1px solid var(--tertiary-light-grey);
        }
      }

      .fuel-transmission-wrapper {
        margin-top: 100px;

        .car-fuel-title,
        .car-transmission-title {
          font-size: var(--heading-font-0-desc);
        }

        .car-fuel-value,
        .car-transmission-value {
          font-size: var(--heading-font-22-des);
        }
      }
    }

    .car-title {
      font-size: var(--heading-font-12-des);
      font-weight: var(--fw-700);
      line-height: var(--heading-lh-9-des-sub-heading);
      letter-spacing: 0.56px;
      padding: 4px 0;
    }

    .car-preTitle,
    .car-tagline {
      font-size: var(--heading-font-0-desc);
      font-weight: var(--fw-400);
      line-height: var(--heading-lh-6-des);
      height: 28px;
    }

    .car-price {
      .car-price-label {
        font-size: var(--heading-font-20-mob-text);
        margin-top: 32px;
      }

      b {
        font-size: var(--heading-font-3-des);
      }
    }

    .car-image {
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: visible;
      height: 100%;
      top: 80px;
      width: 280px;

      img {
        max-width: 300px;
      }
    }
  }

  @media (width >= 1366px) {
    .car-image {
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: visible;
      height: 100%;
      top: 40px;
      width: 400px;

      img {
        max-width: 400px;
      }
    }
  }
}