
[class*='kiss-child-width'] > * {
    box-sizing: border-box;
    width: 100%;
}

.kiss-child-width-1-2 > * { width: 50%; }
.kiss-child-width-1-3 > * { width: calc(100% * 1 / 3.001); }
.kiss-child-width-1-4 > * { width: 25%; }
.kiss-child-width-1-5 > * { width: 20%; }
.kiss-child-width-1-6 > * { width: calc(100% * 1 / 6.001); }

.kiss-child-width-auto > * { width: auto; }

.kiss-child-width-expand > :not([class*='kiss-width']) {
    flex: 1;
    min-width: 1px;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {

    .kiss-child-width-1-1\@s > * { width: 100%; }
    .kiss-child-width-1-2\@s > * { width: 50%; }
    .kiss-child-width-1-3\@s > * { width: calc(100% * 1 / 3.001); }
    .kiss-child-width-1-4\@s > * { width: 25%; }
    .kiss-child-width-1-5\@s > * { width: 20%; }
    .kiss-child-width-1-6\@s > * { width: calc(100% * 1 / 6.001); }

    .kiss-child-width-auto\@s > * { width: auto; }
    .kiss-child-width-expand\@s > :not([class*='kiss-width']) {
        flex: 1;
        min-width: 1px;
    }

}

/* Tablet landscape and bigger */
@media (min-width: 960px) {

    .kiss-child-width-1-1\@m > * { width: 100%; }
    .kiss-child-width-1-2\@m > * { width: 50%; }
    .kiss-child-width-1-3\@m > * { width: calc(100% * 1 / 3.001); }
    .kiss-child-width-1-4\@m > * { width: 25%; }
    .kiss-child-width-1-5\@m > * { width: 20%; }
    .kiss-child-width-1-6\@m > * { width: calc(100% * 1 / 6.001); }

    .kiss-child-width-auto\@m > * { width: auto; }
    .kiss-child-width-expand\@m > :not([class*='kiss-width']) {
        flex: 1;
        min-width: 1px;
    }

}

/* Desktop and bigger */
@media (min-width: 1200px) {

    .kiss-child-width-1-1\@l > * { width: 100%; }
    .kiss-child-width-1-2\@l > * { width: 50%; }
    .kiss-child-width-1-3\@l > * { width: calc(100% * 1 / 3.001); }
    .kiss-child-width-1-4\@l > * { width: 25%; }
    .kiss-child-width-1-5\@l > * { width: 20%; }
    .kiss-child-width-1-6\@l > * { width: calc(100% * 1 / 6.001); }

    .kiss-child-width-auto\@l > * { width: auto; }
    .kiss-child-width-expand\@l > :not([class*='kiss-width']) {
        flex: 1;
        min-width: 1px;
    }

}

/* Large screen and bigger */
@media (min-width: 1600px) {

    .kiss-child-width-1-1\@xl > * { width: 100%; }
    .kiss-child-width-1-2\@xl > * { width: 50%; }
    .kiss-child-width-1-3\@xl > * { width: calc(100% * 1 / 3.001); }
    .kiss-child-width-1-4\@xl > * { width: 25%; }
    .kiss-child-width-1-5\@xl > * { width: 20%; }
    .kiss-child-width-1-6\@xl > * { width: calc(100% * 1 / 6.001); }

    .kiss-child-width-auto\@xl > * { width: auto; }
    .kiss-child-width-expand\@xl > :not([class*='kiss-width']) {
        flex: 1;
        min-width: 1px;
    }

}


[class*='kiss-width'] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

/* Halves */
.kiss-width-1-2 { width: 50%; }

/* Thirds */
.kiss-width-1-3 { width: calc(100% * 1 / 3.001); }
.kiss-width-2-3 { width: calc(100% * 2 / 3.001); }

/* Quarters */
.kiss-width-1-4 { width: 25%; }
.kiss-width-3-4 { width: 75%; }

/* Fifths */
.kiss-width-1-5 { width: 20%; }
.kiss-width-2-5 { width: 40%; }
.kiss-width-3-5 { width: 60%; }
.kiss-width-4-5 { width: 80%; }

/* Sixths */
.kiss-width-1-6 { width: calc(100% * 1 / 6.001); }
.kiss-width-5-6 { width: calc(100% * 5 / 6.001); }


/* Auto */
.kiss-width-auto { width: auto; }

/* Expand */
.kiss-width-expand {
    flex: 1;
    min-width: 1px;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {

    /* Whole */
    .kiss-width-1-1\@s { width: 100%; }

    /* Halves */
    .kiss-width-1-2\@s { width: 50%; }

    /* Thirds */
    .kiss-width-1-3\@s { width: calc(100% * 1 / 3.001); }
    .kiss-width-2-3\@s { width: calc(100% * 2 / 3.001); }

    /* Quarters */
    .kiss-width-1-4\@s { width: 25%; }
    .kiss-width-3-4\@s { width: 75%; }

    /* Fifths */
    .kiss-width-1-5\@s { width: 20%; }
    .kiss-width-2-5\@s { width: 40%; }
    .kiss-width-3-5\@s { width: 60%; }
    .kiss-width-4-5\@s { width: 80%; }

    /* Sixths */
    .kiss-width-1-6\@s { width: calc(100% * 1 / 6.001); }
    .kiss-width-5-6\@s { width: calc(100% * 5 / 6.001); }

    /* Auto */
    .kiss-width-auto\@s { width: auto; }

    /* Expand */
    .kiss-width-expand\@s {
        flex: 1;
        min-width: 1px;
    }

}

/* Tablet landscape and bigger */
@media (min-width: 960px) {

    /* Whole */
    .kiss-width-1-1\@m { width: 100%; }

    /* Halves */
    .kiss-width-1-2\@m { width: 50%; }

    /* Thirds */
    .kiss-width-1-3\@m { width: calc(100% * 1 / 3.001); }
    .kiss-width-2-3\@m { width: calc(100% * 2 / 3.001); }

    /* Quarters */
    .kiss-width-1-4\@m { width: 25%; }
    .kiss-width-3-4\@m { width: 75%; }

    /* Fifths */
    .kiss-width-1-5\@m { width: 20%; }
    .kiss-width-2-5\@m { width: 40%; }
    .kiss-width-3-5\@m { width: 60%; }
    .kiss-width-4-5\@m { width: 80%; }

    /* Sixths */
    .kiss-width-1-6\@m { width: calc(100% * 1 / 6.001); }
    .kiss-width-5-6\@m { width: calc(100% * 5 / 6.001); }

     /* Auto */
    .kiss-width-auto\@m { width: auto; }

    /* Expand */
    .kiss-width-expand\@m {
        flex: 1;
        min-width: 1px;
    }

}

/* Desktop and bigger */
@media (min-width: 1200px) {

    /* Whole */
    .kiss-width-1-1\@l { width: 100%; }

    /* Halves */
    .kiss-width-1-2\@l { width: 50%; }

    /* Thirds */
    .kiss-width-1-3\@l { width: calc(100% * 1 / 3.001); }
    .kiss-width-2-3\@l { width: calc(100% * 2 / 3.001); }

    /* Quarters */
    .kiss-width-1-4\@l { width: 25%; }
    .kiss-width-3-4\@l { width: 75%; }

    /* Fifths */
    .kiss-width-1-5\@l { width: 20%; }
    .kiss-width-2-5\@l { width: 40%; }
    .kiss-width-3-5\@l { width: 60%; }
    .kiss-width-4-5\@l { width: 80%; }

    /* Sixths */
    .kiss-width-1-6\@l { width: calc(100% * 1 / 6.001); }
    .kiss-width-5-6\@l { width: calc(100% * 5 / 6.001); }

    /* Auto */
    .kiss-width-auto\@l { width: auto; }

    /* Expand */
    .kiss-width-expand\@l {
        flex: 1;
        min-width: 1px;
    }

}

/* Large screen and bigger */
@media (min-width: 1600px) {

    /* Whole */
    .kiss-width-1-1\@xl { width: 100%; }

    /* Halves */
    .kiss-width-1-2\@xl { width: 50%; }

    /* Thirds */
    .kiss-width-1-3\@xl { width: calc(100% * 1 / 3.001); }
    .kiss-width-2-3\@xl { width: calc(100% * 2 / 3.001); }

    /* Quarters */
    .kiss-width-1-4\@xl { width: 25%; }
    .kiss-width-3-4\@xl { width: 75%; }

    /* Fifths */
    .kiss-width-1-5\@xl { width: 20%; }
    .kiss-width-2-5\@xl { width: 40%; }
    .kiss-width-3-5\@xl { width: 60%; }
    .kiss-width-4-5\@xl { width: 80%; }

    /* Sixths */
    .kiss-width-1-6\@xl { width: calc(100% * 1 / 6.001); }
    .kiss-width-5-6\@xl { width: calc(100% * 5 / 6.001); }

    /* Auto */
    .kiss-width-auto\@xl { width: auto; }

    /* Expand */
    .kiss-width-expand\@xl {
        flex: 1;
        min-width: 1px;
    }

}
