// a mixin for centering with different methods
@mixin center($context: default) {
  @if $context == horizontal {
    @include absolute(l 50%);
    transform: translateX(-50%);
  } @else if $context == vertical {
    @include absolute(t 50%);
    transform: translateY(-50%);
  } @else if $context == both {
    @include absolute(t 50%, l 50%);
    transform: translate(-50%, -50%);
  } @else if $context == cover {
    @include absolute(a 0);
  } @else { // assuming default case - oldschool horizontal centering
    margin-left: auto;
    margin-right: auto;
  }
}