example-mixin.css

*,:after,:before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.row{margin:0 auto;max-width:1240px;padding-left:5px;padding-right:5px}.row:after,.row:before{content:" ";display:table}.row:after{clear:both}@media screen and (min-width:641px){.row{padding-left:5px;padding-right:5px}}@media screen and (min-width:769px){.row{padding-left:10px;padding-right:10px}}.col-3,.col-6{float:left;padding-left:5px;padding-right:5px;display:block}@media screen and (min-width:641px){.col-3,.col-6{padding-left:5px;padding-right:5px}}@media screen and (min-width:769px){.col-3,.col-6{padding-left:10px;padding-right:10px}}.row>[class*=col-]>.row{margin-left:-10px;margin-right:-10px}@media screen and (min-width:641px){.row>[class*=col-]>.row{margin-left:-10px;margin-right:-10px}}@media screen and (min-width:769px){.row>[class*=col-]>.row{margin-left:-20px;margin-right:-20px}}.inner{height:50px;border-radius:10px;background:#ddd;margin-top:10px!important;margin-bottom:10px!important}.col-3,.col-6{width:50%}@media screen and (min-width:641px){.col-3{width:25%}}@media screen and (min-width:769px){.col-3{width:16.66667%}}@media screen and (min-width:641px){.offset{margin-left:25%}}