/* ==========================================================================
   Typography styles
   ========================================================================== */
@include foundation-typography;

.alpha { font-size: rem-calc( map-deep-get($header-styles, small, h1, font-size) ); }
.beta { font-size: rem-calc( map-deep-get($header-styles, small, h2, font-size) ); }
.gamma { font-size: rem-calc( map-deep-get($header-styles, small, h3, font-size) ); }
.delta { font-size: rem-calc( map-deep-get($header-styles, small, h4, font-size) ); }
.epsilon { font-size: rem-calc( map-deep-get($header-styles, small, h5, font-size) ); }
.zeta { font-size: rem-calc( map-deep-get($header-styles, small, h6, font-size) ); }

@include breakpoint (medium) {
 .alpha { font-size: rem-calc( map-deep-get($header-styles, medium, h1, font-size) ) }
 .beta { font-size: rem-calc( map-deep-get($header-styles, medium, h2, font-size) ) }
 .gamma { font-size: rem-calc( map-deep-get($header-styles, medium, h3, font-size) ) }
 .delta { font-size: rem-calc( map-deep-get($header-styles, medium, h4, font-size) ) }
 .epsilon { font-size: rem-calc( map-deep-get($header-styles, medium, h5, font-size) ) }
 .zeta { font-size: rem-calc( map-deep-get($header-styles, medium, h6, font-size) ) }
}

h1 {
  color: map-deep-get($foundation-palette, tertiary);
}

h2 {
  color: $primary-color;
}