.vd-full {
    width: 100%;
    box-sizing: border-box;
}
.vd-quarter {
    width: 25%;
    box-sizing: border-box;
    float: left;
}
.vd-three-quarter {
    width: 75%;
    box-sizing: border-box;
    float: left;
}
.vd-half {
    width: 50%;
    box-sizing: border-box;
    float: left;
}
.vd-third {
    width: 33.33%;
    box-sizing: border-box;
    float: left;
}
.vd-half-con {
    width: 50%;
    box-sizing: border-box;
    float: left;
}
.vd-sixth {
    width: 16.66%;
    box-sizing: border-box;
    float: left;
}
.vd-fifth {
    width: 20%;
    box-sizing: border-box;
    float: left;
}
/* Styles for Mobile */
@media (max-width: 768px) {
    .vd-full,
    .vd-quarter,
    .vd-three-quarter,
    .vd-half,
    .vd-third,
    .vd-half-con,
    .vd-sixth,
    .vd-fifth {
        width: 100%;
        margin: 0 auto;
        float: none;
    }
}

/* Styles for Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .vd-full {
        width: 100%;
    }
    .vd-half-con {
        width: 100%;
        float: left;
    }
    .vd-sixth, .vd-fifth, .vd-third, .vd-half, .vd-three-quarter, .vd-quarter {
        width: 50%; 
        float: left;
    }
}