$heading-font-family: 'Exo 2', sans-serif;

$heading-font-sizes: (
    h1: 4rem,
    h2: 2rem,
    h3: 1.5rem,
    h4: 1rem,
    h5: 0.875rem,
    h6: 0.75rem
);

$heading-breakpoints: (
    'md': 4 / 5,
    'sm': 2 / 3
);

@mixin headings {
    @each $tag, $size in $heading-font-sizes {
        #{$tag} {
            font: {
                family: $heading-font-family;
                size: $size;
                weight: bold;
            }

            small {
                font-size: calc(2em / 3);
            }

            @each $breakpoint, $modifier in $heading-breakpoints {
                @media (max-width: #{map-get($grid-breakpoints, $breakpoint)}) {
                    font-size: $size * $modifier;
                }
            }
        }
    }
}