.car-brochure {
  padding-top: 3rem;
  padding-bottom: 5rem;
  background-color: var(--tertiary-white);
  font-family: var(--body-font-arena);
  color: var(--primary-black);
  @media (width >=1024px) {
    padding-top: 4rem;
  }

  .card-clip {
    .brochure-text {
      :is(h1, h2, h3, h4, h5, h6) {
        font-size: var(--heading-font-15-mob-sub-heading);
        font-style: normal;
        font-weight: var(--fw-500);
        line-height: var(--heading-lh-8-mob-display);
        margin: 0;
        @media (width >=1024px) {
          font-weight: var(--fw-700);
          font-size: var(--heading-font-2-des);
          line-height: var(--heading-lh-2-1-des);
        }
      }

      .subtitle {
        p {
          margin-top: var(--space-8px);
          margin-bottom: 3.5rem;
          font-size: var(--heading-font-11-mob-text-small);
          font-weight: var(--fw-300);
          line-height: var(--heading-lh-19-mob-display);
          font-style: normal;
          @media (width >=1024px) {
            margin-top: var(--space-16px);
            font-size: var(--heading-font-22-des);
            margin-bottom: 3rem;
          }
          @media (width >=1366px) {
            margin-bottom: 2.5rem;
          }
        }
      }
    }
  }
  .car-cards-section {
    .car-cards-items {
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 3rem;
      @media (width >=768px) {
        flex-flow: row wrap;
        gap: 3rem 0;
        justify-content: space-between;
      }
      @media (width >=1024px) {
        justify-content: space-around;
        row-gap: 3.5rem;
      }
      .car-card {
        position: relative;
        display: flex;
        flex-direction: column;

        &::after {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(211.73deg, rgba(157, 207, 218, 0.4) -61.57%, rgba(22, 29, 31, 0.4) 100.57%);
          pointer-events: none;
          z-index: 1;
        }

        .card-bg {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          z-index: 0;
        }

        .car-card-content {
          position: relative;
          padding: var(--space-16px);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          z-index: 2;
          @media (width >=1024px) {
            flex-direction: row;
            gap: 1.5rem;
          }
          @media (width >=1366px) {
            gap: 8.125rem;
            padding: var(--space-24px);
          }
          .car-image-col {
            flex: 1;
            @media (width >=1366px) {
              flex: 0.8125;
            }
          }
          .car-right-col {
            flex: 1;
            @media (width >=1366px) {
              padding-right: var(--space-20px);
            }
          }
          .car-card-header {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            margin-bottom: 2.5rem;
            @media (width >=1024px) {
              margin-bottom: 2rem;
            }
          }
          .car-logo-wrapper {
            display: flex;
            gap: 1rem;
            align-items: center;
            @media (width >=1024px) {
              gap: 2rem;
            }
            img {
              width: 7.875rem;
              height: -webkit-fill-available;
            }

            .explore-link {
              font-size: var(--heading-font-20-mob-text);
              color: var(--primary-blue-700);
              font-weight: var(--fw-400);
              font-style: normal;
              text-decoration: underline;
              line-height: var(--heading-lh-10-mob-text-small);

              &:hover {
                &::after {
                  transform: scale(1.4);
                }
              }
              &::after {
                content: '';
                position: absolute;
                width: 1.125rem;
                height: 1.125rem;
                background: url(/icons/explore-arrow.svg) no-repeat;
                background-size: cover;
                margin-left: var(--space-4px);
                transition: transform 0.3s ease;
              }
            }
          }

          .car-price {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            font-style: normal;
            @media (width >=1024px) {
              gap: 0.25rem;
            }
            .car-price-label {
              font-weight: var(--fw-400);
              line-height: var(--heading-lh-19-mob-display);
              font-size: var(--heading-font-11-mob-text-small);
              color: var(--neutrals-heading);
              @media (width >=1024px) {
                font-size: var(--heading-font-0-desc);
              }
            }
            .price-span {
              color: var(--neutrals-heading);
              font-weight: var(--fw-500);
              line-height: var(--heading-lh-5--mob);
              font-size: var(--heading-font-8-mob);
              font-style: normal;
              @media (width >=1024px) {
                font-size: var(--heading-font-7-des);
              }
            }
          }

          .card-image {
            display: flex;
            justify-content: center;
            margin-bottom: 2.5rem;
            @media (width >=1024px) {
              margin-bottom: 0;
            }
            img {
              aspect-ratio: 288/162;
              width: 100%;
              @media (width >=1024px) {
                aspect-ratio: 350/197;
              }
              @media (width >=1366px) {
                aspect-ratio: 378/213;
              }
            }
          }
          .card-link-section {
            @media (width >=1024px) {
              display: flex;
              gap: 0.5rem;
              align-items: center;
            }
            @media (width >=1366px) {
              gap: 1.5rem;
            }
            .dropdown-section {
              margin-bottom: var(--space-24px);
              @media (width >=1024px) {
                flex: 1;
                margin-bottom: 0;
                align-self: flex-end;
              }
              .form-dropdown-select {
                position: relative;

                &::after {
                  content: '';
                  position: absolute;
                  width: 1.5rem;
                  height: 1.5rem;
                  background: url(/icons/arrow-dropdown.svg) no-repeat center;
                  background-size: contain;
                  right: 0;
                  bottom: 6px;
                }
              }
              .selected-option {
                border-bottom: 0.5px solid var(--inactive-content);
                padding: var(--space-8px) var(--space-16px) var(--space-8px) 0;
                color: var(--primary-black);
                font-style: normal;
                font-weight: var(--fw-500);
                font-size: var(--heading-font-20-mob-text);
                line-height: var(--heading-lh-19-mob-display);
                @media (width >=1024px) {
                  font-size: var(--heading-font-22-des);
                }

                &.disabled {
                  pointer-events: none;
                  opacity: 0.6;
                  cursor: not-allowed;
                }
              }
              .dropdown-options {
                display: none;
                flex-direction: column;
                position: absolute;
                max-height: 10rem;
                width: 100%;
                overflow-y: auto;
                background-color: var(--tertiary-white);
                z-index: 10;
                cursor: pointer;
                user-select: none;
                padding: var(--space-8px);

                &.open {
                  display: flex;
                }

                .dropdown-item {
                  color: var(--primary-black);
                  font-size: var(--heading-font-20-mob-text);
                  line-height: var(--heading-lh-19-mob-display);
                  font-weight: var(--fw-400);
                  padding: var(--space-12px);
                }
              }
            }
            .download-btn {
              padding: var(--space-8px) var(--space-16px);
              background-color: var(--primary-blue-700);
              color: var(--secondary-gray-20);
              font-size: var(--heading-font-20-mob-text);
              line-height: var(--heading-lh-4--mob-text-medium);
              font-weight: var(--fw-400);
              font-style: normal;
              display: flex;
              justify-content: center;
              @media (width >=1024px) {
                width: max-content;
                padding: var(--space-16px) var(--space-24px);
              }
            }
          }
        }
      }
    }
  }
}