$base: 24;
$xs: 768px;
$sm: 768px;
$md: 992px;
$lg: 1200px;
$xl: 1920px;

.dy-row {
    display: flex;
    box-sizing: border-box;
    // flex-wrap: wrap;
}

.dy-col {
    display: flex;
    box-sizing: border-box;
}

@for $i from 1 through $base {
    .dy-col-#{$i} {
        width: (1 / 24 * $i * 100) * 1%;;
    }
}

@for $i from 1 through $base {
    .dy-col-offset-#{$i} {
        margin-left: (1 / 24 * $i * 100) * 1%;;
    }
}

// @media screen and (min-width: 1200px) {
//     .dy-col-lg-6 {
//         width: (1 / 24 * 6 * 100) * 1%;
//     }
// }

// @mixin screen($var, $screenSize, $base) {
//     @media screen and (min-width: $screenSize) {
//         @for $i from 1 through $base {
//             .dy-col-#{$var}-#{$i} {
//                 width: (1 / 24 * $i * 100) * 1%;
//             }
//         }
//     }
// }

@media screen and (max-width: $xs) {
    @for $i from 1 through $base {
        .dy-col-xs-#{$i} {
            width: (1 / 24 * $i * 100) * 1%;
        }
    }
}

@media screen and (min-width: $sm) {
    @for $i from 1 through $base {
        .dy-col-sm-#{$i} {
            width: (1 / 24 * $i * 100) * 1%;
        }
    }
}

@media screen and (min-width: $md) {
    @for $i from 1 through $base {
        .dy-col-md-#{$i} {
            width: (1 / 24 * $i * 100) * 1%;
        }
    }
}

@media screen and (min-width: $lg) {
    @for $i from 1 through $base {
        .dy-col-lg-#{$i} {
            width: (1 / 24 * $i * 100) * 1%;
        }
    }
}

@media screen and (min-width: $xl) {
    @for $i from 1 through $base {
        .dy-col-xl-#{$i} {
            width: (1 / 24 * $i * 100) * 1%;
        }
    }
}