// Media Queries @mixin media-query($device) {
@media screen and (max-width: $device) { @content; }
}
// Font size handler @mixin relative-font-size($ratio) {
font-size: $base-font-size * $ratio;
}
// Wrapper %clearfix::after {
content: ""; display: table; clear: both;
}
%wrapper {
width: 100%; max-width: calc(#{$content-width} - #{$spacing-unit * 2}); padding-left: $spacing-unit; padding-right: $spacing-unit; margin-left: auto; margin-right: auto; @extend %clearfix; @include media-query($on-palm) { max-width: calc(#{$content-width} - #{$spacing-unit}); padding-left: $spacing-unit / 2; padding-right: $spacing-unit / 2; }
}