.vrp4-auto {
    margin-bottom: 20px;
}

.vrp4-auto .vrp4-grid {
    display: grid;
    gap: 1rem;
}

@media screen and (min-width: 768px) {
    .vrp4-auto .vrp4-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1024px) {
    .vrp4-auto .vrp4-grid {
        gap: 3rem
    }
}

@media screen and (min-width: 1200px) {
    .vrp4-auto .vrp4-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.vrp4-auto .vrp4-card {
    transition: box-shadow .15s ease-in-out;
}

.vrp4-auto .vrp4-card:hover {
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 25%)
}

.vrp4-auto .vrp4-card-header {
    /* to align the images we need to set a height to the header, and for that we need to hardcode every line-heights */
    --small-lh: 1.125rem;
    --normal-lh: 1.5rem;
    --title-lh: 2.5rem;
    /* match height to make + disponibility line-height */
    --certification-max-height: calc(var(--title-lh) + var(--small-lh));

    color: inherit;
    border-left: solid 4px var(--primary);
    padding-left: .5rem;
    margin-bottom: 1rem;
    /* 4 .car-info-small + model + car-make's lineheight */
    min-height: calc( 4 * var(--small-lh) + var(--normal-lh) + var(--title-lh)); 
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.vrp4-auto .vrp4-card-header:hover {
    color: inherit;
    text-decoration: none;
}
.vrp4-auto .car-info-small {
    /* using a custom class instead of .class to have the lineheight=1.115rem (used for min-height of header) */
    font-size: .75rem;
    line-height: var(--small-lh);
}

.vrp4-auto .car-certification-container {
    display: flex;
    align-items: center;
}
.vrp4-auto .car-make-container {
    font-size: 1.5rem;
    line-height: var(--title-lh);
    white-space: nowrap;
}

.vrp4-auto .car-make {
    font-weight: bold;
    text-transform: uppercase;
    line-height: var(--normal-lh);
}   
.vrp4-auto .car-make,
.vrp4-auto .car-make:hover {
    color: var(--component-text-color, var(--text-color), #212529)
}

.vrp4-auto .car-year {
    /* we set 50% of the car-make's font-size to align it perfectly top */
    font-size: 50%;
    vertical-align: super;
    line-height: var(--normal-lh);
}

.vrp4-auto .car-trim {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vrp4-auto .car-certification {
    margin-left: auto;
    max-width: 50%;
    max-height: var(--certification-max-height);
    /* position: absolute;
    bottom: 0;
    right: 0;
    height: var(--certification-width);
    width: var(--certification-width); */
}

.vrp4-auto .car-link {
    display: block;
    position: relative; /* for the absoluted .car-overlay-viewMore */
}

.vrp4-auto .car-img-container {
    /* used to overlap both img without using absolute */
    display: grid;
    grid-template-areas: 'stack';
}

.vrp4-auto .car-img-container .car-img,
.vrp4-auto .car-img-container .car-watermark {
    grid-area: stack;
}

.vrp4-auto .car-watermark,
.vrp4-auto .car-img {
    aspect-ratio: 4 / 3; /* belvedaire asked for this ratio */
    width: 100%;
    height: auto;
    object-fit: cover;
}

.vrp4-auto .car-overlay-viewMore {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    color: white;
    z-index: 1;
    font-size: 1.5rem;
    font-weight: bold;
    backdrop-filter: blur(3px);
}

.vrp4-auto .carousel-control-next, 
.vrp4-auto .carousel-control-prev {
    background: none;
    border: none;
}

.vrp4-auto .car-price-previous {
    text-decoration: line-through;
}

.vrp4-auto .car-price {
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.vrp4-auto .card-body .frequency_text {
    font-size: 0.80rem;
}

.vrp4-auto .car-transport-container {
    margin-bottom: 1rem;
}

.vrp4-auto .car-transport {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    transition: .15s ease-in-out;
}

.vrp4-auto .car-transport:hover {
    cursor: pointer;
    color: var(--primary, #dadada);
}

.vrp4-auto .vrp4-card-footer {
    background-color: transparent;
    border-top: 0;
    padding-top: 0;
    padding-bottom: 1.25rem; /* card-body's padding */
}

.vrp4-auto .car-btn-row {
    --gap: .5rem;
    margin-right: calc( -.5 * var(--gap));
    margin-left: calc( -.5 * var(--gap));
}
.vrp4-auto .car-btn-row>* {
    padding-right: calc( .5 * var(--gap));
    padding-left: calc( .5 * var(--gap));
}

.vrp4-auto .carfax-img {
    max-height: 3rem;
    max-width: 100%;
}

.pagination {
    margin: 25px;
    justify-content: center;
}

.status_watermark_vrp {
    text-align: center;
    z-index: 10;
    object-fit: contain;
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.6));
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.warning-block {
    display: flex;
    align-items: center;
    border: 2px solid #f5a623;
    border-radius: 4px;
    background-color: #fff7e6;
    padding: 10px;
}

.warning-icon {
    margin-right: 10px;
    color: #f5a623;
}

.warning-message {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
}