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

@mixin absCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// MEDIA QUERY MANAGER
/*
0   -  600px:       Phone
600 -  900px:       Tablet portrait
900 -  1200px:      Tablet Landscape
[1200 - 1800]       Normal Styles apply here
1800px +           Big Desktop

$breakpoint argument choices:
- phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typography > general layout + grid > page layout > components

1em=16px
*/
@mixin respond($breakpoint) {
  @if $breakpoint == phone {
    //600px
    @media only screen and  (max-width: 37.5em) {
      @content;
    }
  }
  @if $breakpoint == tab-port {
    //900px
    @media only screen and (max-width: 56.25em) {
      @content;
    }
  }
  @if $breakpoint == tab-land {
    // 1200px
    @media only screen and (max-width: 75em) {
      @content;
    }
  }
  @if $breakpoint == big-desktop {
    // 1800px
    @media only screen and (min-width: 112.5em) {
      @content;
    }
  }
}
