﻿.vehicle-cards {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
    width: 100%;
    background: #fff;
}

.vehicle-card {
    background-color: rgba(224, 224, 224, 0.2);
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

    .vehicle-card img {
        max-height: 220px;
        max-width: 300px;
        margin-top: 10px;
    }

    .vehicle-card .vehicle-card-content {
        margin: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

        .vehicle-card .vehicle-card-content .vehicle-card-buttons {
            display: flex;
            justify-content: flex-end;
            flex-wrap: nowrap;
            width: 100%;
            margin: 20px auto;
        }

            .vehicle-card .vehicle-card-content .vehicle-card-buttons > a {
                padding: 10px;
                font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
                width: 150px;
                border-radius: 5px;
                border-color: transparent;
                background-color: #4498FC;
                color: #fff;
                text-align: center;
                transition: .1s ease-in-out;
            }

                .vehicle-card .vehicle-card-content .vehicle-card-buttons > a:hover {
                    box-shadow: 0px 8px 14px rgba(37, 37, 38, 0.40);
                    transform: translateY(-3px);
                    font-weight: 700;
                }


/* Media Queries */
@media only screen and (max-width: 760px) {


    /* Vehicle options */
    .vehicle-card {
        flex-wrap: wrap;
    }

        .vehicle-card .vehicle-card-content {
            width: 100%;
            justify-content: center;
        }

            .vehicle-card .vehicle-card-content > p {
                text-align: center;
            }

            .vehicle-card .vehicle-card-content .vehicle-card-buttons {
                flex-wrap: wrap;
                justify-content: center;
            }
}
