// Breakpoint mixin
@mixin breakpoint($mq01: 0, $mq2: false, $maxmin: max-width) {
  @if $mq2 == false {
    @media ($maxmin: $mq01) {
      @content;
    }
  }
  @else {
    @media (min-width: $mq01) and (max-width: $mq2) {
      @content;
    }
  }
}

// Responsive font size mixin
@mixin font-size-map($font-size-map) {
  @each $breakpoint, $font-size in $font-size-map {
    @if $breakpoint == null {
      font-size: $font-size;
    } @else {
      @include breakpoint($breakpoint) {
        font-size: $font-size;
      }
    }
  }
}

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}