@import "../../variables.scss";


.YourVehicleDataBlock {
    h4 {
        font-size: $font + 30;
        padding-bottom: $pad + 30;
        @media (max-width: $xxl) {
            margin-bottom: 0;
        }
        @media (max-width: $lg) {
            padding-bottom: $pad + 20;
        }
        @media (max-width: $md) {
            font-size: $font + 12;
            padding-bottom: $pad + 14;
        }
    }
    .YourVehicleDataList {
        margin: 0 -15px;
        li{
            padding: 0 $pad + 5 $pad + 18;
            width: 20%;
            flex: 0 0 20%;
            @media (max-width: $xl) {
                width: 25%;
                flex: 0 0 25%;
            }
            @media (max-width: $lg) {
                width: 33.333%;
                flex: 0 0 33.333%;
            }
            @media (max-width: $md) {
                width: 100%;
                flex: 0 0 100%;
            }
        }
    }
    .YourVehicleDataCard {
        .blankValue{
            font-size: 17px;
            align-items: center;
            color: #f49320;
        }
        span {
            font-weight: $font-weight-heavy;
            color: $black;
            font-size: $font + 4;
        }
        small {
            font-weight: $font-weight-heavy;
            color: $orange;
            font-size: $font + 4;
            margin-left: $mrg;
        }
        i {
            display: block;
            margin-left: $mrg;
            img {
                display: block;
            }
        }

        ul {
            margin: 0;
            flex: 0 0 auto;
            li {
                width: auto;
                padding: 0;
                font-weight: $font-weight-heavy;
                color: $orange;
                font-size: $font + 4;
                margin-bottom: $mrg - 4;
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}