.configurator-cards-wrapper {
  background-color: var(--tertiary-white);

  .brochure-text {
    display: flex;
    flex-flow: column;
    gap: 0.5rem;

    @media (width>=1024px) {
      gap: 1rem;
      margin-bottom: 3.5rem;
    }

    .title {
      font-family: var(--body-font-arena);
      font-size: var(--heading-font-15-mob-sub-heading);
      font-style: normal;
      font-weight: var(--fw-500);
      line-height: var(--heading-lh-10-mob-display);
      margin: 0;
      color: var(--primary-black);

      @media (width>=1024px) {
        font-size: var(--heading-font-2-des);
        line-height: var(--heading-lh-2-1-des);
      }
    }

    .subtitle {
      :is(h1, h2, h3, h4, h5, h6, p) {
        font-family: var(--body-font-arena);
        font-size: var(--heading-font-11-mob-text-small);
        font-style: normal;
        font-weight: var(--fw-300);
        line-height: var(--heading-lh-19-mob-display);
        margin: 0;
        padding-bottom: 2.5rem;
        color: var(--primary-black);

        @media (width>=1024px) {
          font-size: var(--heading-font-22-des);
          padding-bottom: 0;
        }
      }
    }
  }

  .card-section {
    display: flex;
    flex-direction: column;

    .sub-heading {
      :is(h1, h2, h3, h4, h5, h6, p) {
        font-family: var(--body-font-arena);
        font-size: var(--heading-font-1-mob);
        font-style: normal;
        font-weight: var(--fw-500);
        line-height: var(--heading-lh-1--mob-display);
        letter-spacing: 0.4px;
        margin: 0;
        color: var(--primary-main);
        padding-bottom: var(--space-18px);

        @media (width>=1024px) {
          font-size: var(--heading-font-1-des);
          letter-spacing: 0.64px;
          line-height: var(--heading-lh-2-des-display);
          padding-bottom: 2.5rem;
        }
      }
    }
  }

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

    @media (width>=1024px) {
      padding-top: 4rem;
      padding-bottom: 5rem;
    }

    .termsCondition-wrapper {
      position: relative;
      z-index: 0;
    }

    .disclaimer {
      font-size: var(--heading-font-19-mob-text-small);
      line-height: var(--heading-lh-10-mob-text-small);
      font-style: italic;
      font-weight: var(--fw-400);
      padding-top: var(--space-18px);
      text-decoration: none;
      color: var(--primary-black);
    }

    .termsConditionPopup {
      display: none;
      width: 231px;
      max-height: 219px;
      min-height: 20px;
      padding: var(--space-8px) var(--space-12px);
      background: var(--secondary-main);
      box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.12);
      position: absolute;
      bottom: 32px;
      right: unset;
      left: 0px;
      z-index: 10;
      color: var(--tertiary-white);

      &.showTermsPopup {
        display: block;
        z-index: 1;
      }

      p,
      ul {
        margin: 0;
        padding: 0;
      }

      p,
      ul li {
        color: var(--tertiary-white);
        font-family: var(--body-font-arena);
        font-size: var(--heading-font-11-mob-text-small);
        font-style: normal;
        font-weight: var(--fw-300);
        line-height: var(--heading-lh-20-mob-text-small);
        margin-top: 0;
      }

      ul {
        padding-left: var(--space-15px);

        li {
          list-style-type: disc;
        }
      }

      &::after {
        content: '';
        background: url('/icons/tandcpopup_arrow.svg') no-repeat center;
        display: block;
        bottom: -1.0625rem;
        position: absolute;
        width: 1.25rem;
        height: 1.25rem;
        left: 1.125rem;
      }
    }
  }

  .car-card {
    position: relative;
    display: flex;
    flex-direction: column;

    .car-card-content {
      background: var(--gradients-accent-section-bg-1);
      clip-path: polygon(0 0, 100% 0, 100% 80%, 85% 100%, 0 100%);
      padding: var(--space-32px) var(--space-8px) 1.875rem var(--space-8px);
      display: flex;
      flex-direction: column;
      color: var(--tertiary-white);
      @media (width>=1024px) {
        padding: var(--space-32px) var(--space-12px);
      }

      .card-image {
        img {
          display: flex;
          aspect-ratio: 304/172;
          width: 100%;
          margin-top: var(--space-32px);
          margin-bottom: 1.625rem;
          object-fit: contain;

          @media (width>=1024px) {
            aspect-ratio: 378/213;
            transition: transform 0.3s ease-in-out;
            margin-bottom: var(--space-16px);
            &:hover {
              transform: scale(1.1);
            }
          }
        }
      }

      .car-logo-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          aspect-ratio: 190/60;
          max-width: 11.875rem;
          height: 3.75rem;
          object-fit: contain;

          @media (width>=1024px) {
            aspect-ratio: 241/76;
            max-width: 15.0625rem;
            height: 4.75rem;
            object-fit: contain;
          }
        }
      }

      .car-button-wrapper {
        display: flex;
        justify-content: center;

        .explore-link {
          display: flex;
          flex-direction: row;
          gap: 0;
          border: 1px solid var(--primary-black);
          width: max-content;
          color: var(--primary-black);
          font-family: var(--body-font-arena);
          font-size: var(--heading-font-20-mob-text);
          font-weight: var(--fw-400);
          line-height: var(--heading-lh-4--mob-text-medium);
          height: auto;
          padding: var(--space-8px) var(--space-16px);

          @media (width>=1024px) {
            padding: var(--space-12px) var(--space-24px);
          }

          &::after {
            content: '';
            width: 1rem;
            height: 1rem;
            background: url(/icons/arrow.svg) no-repeat;
            background-size: contain;
            margin-left: var(--space-8px);
          }
        }

        .explore-link:hover {
          background-color: var(--primary-blue-700);
          color: var(--tertiary-white);

          &::after {
            filter: brightness(0) invert(1);
          }
        }
      }
    }
  }

  .car-cards-items {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin: 0;

    @media (width>=768px) {
      flex-flow: row wrap;
      gap: 1rem 0;
      justify-content: space-between;
    }
    @media (width>=1024px) {
      gap: 3rem 0;
    }
  }
}