.cars{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 4.5vw;
    grid-gap: 10px;
}

.car{
    display:block;
    position: relative;
    grid-column-start: auto;
    grid-column-end: span 3;
    grid-row-start: auto;
    grid-row-end: span 3;
    /*border:1px solid black;*/
}

.car .image{
    position:relative;
    background-size: cover;
    background-position: center;
    height:60%;
    border-top:1px solid #ccc;
}

.car .text{
    position:relative;
}

.car .title{
    padding-top:5px;
    color:#515151;
    font-size: medium;
    /*background-color: #bbb;*/
    font-weight: bold;

}

.car .subtitle{
    color:#515151;
    /*box-shadow: 0 0 0 1px rgba(0,0,0,.3);*/
    border-bottom: 1px solid #ccc;
    padding-top:5px;
    padding-bottom:15px;
}


.car:hover{

}

.car .sale{
    position:absolute;
    top:-3px;
    right:-3px;
    width:60px;
    height:60px;
    background-position: center;
    background-size: cover;
    border-top:1px solid #aaa;
    border-right:1px solid #aaa;
}

.car .venduto{
    position:absolute;
    top:20%;
    width:90%;
    height:20%;
    margin-left:5%;
    margin-right:5%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;


}


@media only screen and (min-width: 2000px){
    .car{
        max-height:300px;
    }
}

@media only screen and (max-width: 1600px){
    .car{
        grid-column-end: span 4;
        grid-row-end: span 5;
    }
}

@media only screen and (max-width: 1200px){
    .car{
        grid-column-end: span 6;
        grid-row-end: span 8;
    }
}
@media only screen and (max-width: 992px){
    .car{
        grid-column-end: span 6;
        grid-row-end: span 7;
    }
}
@media only screen and (max-width: 768px){
    .car{
        grid-column-end: span 6;
        grid-row-end: span 7;
    }
}
@media only screen and (max-width: 500px){
    .car{
        grid-column-end: span 12;
        grid-row-end: span 13;
    }
}