.car-item {
    display: grid;
    max-width: 100%;
    grid-template-columns: 1fr;
    color: var(--main-text);
    gap: 0.5rem;
    text-decoration: none;
}

.car-item:hover {
    cursor: pointer;
}

.car-item:hover .title {
    text-decoration: underline;
    color: var(--third-accent);
}

.car-item .image {
    width: 100%;
    border-radius: 0.5rem;
    object-fit: cover;
}

@media (max-width: 575.98px) {
    .car-item .image {
        max-height: calc(100vw - 2rem);
    }
}

@media (min-width: 576px) {
    .car-item {
        grid-template-areas:
            "img title"
            "img price"
            "img details"
            "img ."
        ;
        
        grid-template-columns: min-content 1fr;
    }

    .car-item .image {
        width: 45vw;
        object-fit: cover;
        grid-area: img;
        max-height: 30vw;
    }

    .car-item .details {
        grid-area: details;
    }

    .car-item .price {
        grid-area: price;
    }

    .car-item .title {
        grid-area: title;
    }
}

@media (min-width: 768px) {
    .car-item {
        gap: 1rem;
        grid-template-areas: 
            "img title"
            "img price"
            "img ."
            "details details"
        ;
        grid-template-rows: repeat(5, min-content);
    }
}

@media (min-width: 992px) {
    .car-item {
        gap: 1rem;
        grid-template-areas: 
            "img title"
            "img price"
            "img ."
            "img details"
    }

    .car-item .image {
        max-width: 403px;
        max-height: 269px;
    }
}

@media (min-width: 1440px) {
    .car-item {
        gap: 1rem;
        grid-template-areas: 
            "img title"
            "img price"
            "img ."
            "details details"
        ;
        grid-template-rows: repeat(5, min-content);
    }

    .car-item .image {
        width: 24vw;
        max-height: 16vw;
    }
}