/* small */
@media (min-width: 640px) { 
    .sm-25{
        width: 25%;
    }
    .sm-50{
        width: 50%;
    }
    .sm-75{
        width: 75%;
    }
    .sm-90{
        width: 90%;
    }
    .sm-100{
        width: 100%;
    }
}

/* medium */
@media (min-width: 768px) { 
    .md-25{
        width: 25%;
    }
    .md-50{
        width: 45%;
    }
    .md-100{
        width: 100%;
    }
}

/* large */
@media (min-width: 1024px) { 
    .lg-25{
        width: 25%;
    }
    .lg-50{
        width: 50%;
    }

    .lg-33{
        width: 33.333%;
    }
    .lg-100{
        width: 100%;
    }
}

/* x-large */
@media (min-width: 1280px) { 
    .xl-25{
        width: 25%;
    }
    .xl-50{
        width: 50%;
    }
    .xl-100{
        width: 100%;
    }
}

/* xx-large */
@media (min-width: 1536px) { 
    .xxl-25{
        width: 25%;
    }
    .xxl-50{
        width: 50%;
    }
    .xxl-100{
        width: 100%;
    }
}