$grid-unit:70px; $grid-margin:10px; $grid-padding:15px; $break-small:500px; $small-break: 30em; $medium-break: 50em; @mixin small(){ @media screen and (max-width: $small-break) { @content; } } @mixin small-medium(){ @media screen and (max-width: $medium-break) { @content; } } @mixin medium(){ @media screen and (min-width: $small-break) and (max-width: $medium-break) { @content; } } @mixin medium-large(){ @media screen and (min-width: $small-break) { @content; } } @mixin large(){ @media screen and (min-width: $medium-break) { @content; } } .content-wrapper{ padding: 0 10px; } .inner-wrapper{ position: relative; @include single-transition(all, 300ms, 0ms, ease-out); } .grid{ width:100%; max-width: 1000px; margin-left: auto; margin-right: auto; } .grid-small{ width:320px; margin:0 auto; }