.car-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-gray-50);
}


.car-card .card-img-wrapper {
        position: relative;
        overflow: hidden;
    }


.car-card .card-img-wrapper img {
            width: 100%;

            height: auto;
            -o-object-fit: cover;
               object-fit: cover;
            aspect-ratio: 1.333;

            -o-object-position: center;

               object-position: center;
        }


.car-card .card-img-wrapper .car-tag {
            display: flex;
            align-items: center;
            gap: 4px;
            position: absolute;
            top: 16px;
            left: 16px;
            padding: 6px 12px;
            border-radius: 8px;
        }


.car-card .card-img-wrapper .car-tag.status-new {
            background: var(--blue-500);
            color: var(--white);
        }


.car-card .card-img-wrapper .car-tag.status-offer {
            background: var(--red);
            color: var(--white);
        }


.car-card .card-img-wrapper .car-tag.status-sold {
            background: #6e757c;
            color: var(--white);
        }


.car-card .card-img-wrapper .car-tag.status-reserved {
            background: var(--amber-100);
            color: var(--amber-900);
        }


.car-card .car-info {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 16px;
        color: var(--text-gray-900);
    }


.car-card .car-info h3,
        .car-card .car-info h4 {
            font-weight: 600;
            line-height: 1.5;
        }


.car-card .car-info h3 {
            font-size: max(18px, min(2vw, 20px));
        }


.car-card .car-info h4 {
            font-size: max(16px, min(2vw, 18px));
        }


.car-card .car-info .car-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 24px 0px;
        }


.car-card .car-info .car-tags .car-tag {
                display: flex;
                align-items: center;
                gap: 4px;
                padding: 4px 8px;
                background: var(--bg-gray-50);
                border-radius: 8px;
            }


.car-card .car-card-footer {
        display: flex;
        justify-content: space-between;

        align-items: flex-end;

        gap: 8px;

        padding-top: 32px;
        margin-top: auto;
    }


.car-card .car-card-footer .car-price {
            display: flex;
            flex-direction: column;
        }


.car-card .car-card-footer .car-price .previous-price,
            .car-card .car-card-footer .car-price .current-price {
                color: var(--red);
                font-weight: 700;
                white-space: nowrap;
            }


.car-card .car-card-footer .car-price .previous-price {
                -webkit-text-decoration: line-through;
                text-decoration: line-through;
                font-size: 16px;
                font-weight: 400;
            }


.car-card .car-card-footer .car-price .current-price {
                font-size: max(20px, min(2vw, 24px));
            }


.car-card .car-card-footer .car-price .tva {
                display: flex;
                align-items: center;
                gap: 2px;
                color: var(--text-gray-500);
                font-size: 14px;
            }


.car-card .car-card-footer .partner .partner-badge {
                display: flex;
                align-items: center;
                gap: 2px;
                color: var(--green-600);
                font-size: 14px;
                font-weight: 600;
            }


.car-card .car-card-footer .partner .partner-name {
                font-size: max(14px, min(2vw, 18px));
                text-transform: uppercase;
                font-weight: 600;
            }


.car-card .car-card-footer .private-seller {
            display: flex;
            align-items: center;
            gap: 8px;
        }


.car-card .car-card-footer .private-seller span {
                font-size: 14px;
            }


.car-card .car-card-footer .private-seller span.large {
                font-size: 16px;
                font-weight: 600;
            }

.car-card.plp {
    flex-direction: row;
}


.car-card.plp .card-img-wrapper {
        flex: 0 0 45%;
        max-width: 380px;
        width: 100%;
        aspect-ratio: 1.333;
    }

.car-card.plp .card-img-wrapper img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
               object-fit: cover;
        }


.car-card.status-sold .card-img-wrapper {
        opacity: 0.5;
    }


@media (min-width: 768px) {
    .car-card-footer {
        flex-direction: row-reverse;
    }
}

@media (max-width: 1056px) {
        .car-card .car-card-footer {
            padding-top: 0px;
        }
}

@media (max-width: 768px) {
    .car-card {
        max-width: 430px;
    }

    .car-card.plp {
        flex-direction: column;
    }

        .car-card.plp .card-img-wrapper {
            max-width: 100%;
            height: 100%;
        }
}

@media (max-width: 405px) {
        .car-card .car-card-footer {
            flex-direction: column-reverse;
            align-items: flex-start;
            gap: 8px;
        }
}