// Responsive breakpoint control
@mixin smaller-than($size) {
    @media screen and (max-width: $size) { @content; }
}
@mixin larger-than($size) {
    @media screen and (min-width: $size) { @content; }
}
@mixin clearfix() {
  &:after {
    display: block;
    content: '';
    font-size: 0;
    clear: both;
    position: relative;
  }
}