/* small devices */
@media (min-width: 640px) {
    .sm-100{
        width: 100%;
    }
    .sm-50{
        width: 50%;
    }
    .sm-33{
        width: 33.33333%;
    }
    .sm-25{
        width: 25%;
    }
    .sm-20{
        width: 20%;
    }
    .sm-16{
        width: 16.666666%;
    }
}
/* medium devices */
@media (min-width: 768px) {
    .md-100{
        width: 100%;
    }
    
    .md-50{
        width: 50%;
    }
    .md-33{
        width: 33.33333%;
    }
    .md-25{
        width: 25%;
    }
    .md-20{
        width: 20%;
    }
    .md-16{
        width: 16.666666%;
    }
}
/* large devices */
@media (min-width: 1024px) {
    .lg-100{
        width: 100%;
    }
    .lg-50{
        width: 50%;
    }
    .lg-33{
        width: 33.33333%;
    }
    .lg-25{
        width: 25%;
    }
    .lg-20{
        width: 20%;
    }
    .lg-16{
        width: 16.666666%;
    }
}
/* extra large */
@media (min-width: 1280px) {
    .xl-100{
        width: 100%;
    }
    .xl-50{
        width: 50%;
    }
    .xl-33{
        width: 33.33333%;
    }
    .xl-25{
        width: 25%;
    }
    .xl-20{
        width: 20%;
    }
    .xl-16{
        width: 16.666666%;
    }
}
/* extra extra large */
@media (min-width: 1536px) {
    .xxl-100{
        width: 100%;
    }
    .xxl-50{
        width: 50%;
    }
    .xxl-33{
        width: 33.33333%;
    }
    .xxl-25{
        width: 25%;
    }
    .xxl-20{
        width: 20%;
    }
    .xxl-16{
        width: 16.666666%;
    }
}