%heading {
    font-family: $font-display;
    font-weight: 400;
}

.heading-1 {
    @extend %heading;
    font-size: 4.5rem;
    color: $color-grey-light-1;
    line-height: 1;
}

.heading-2 {
    @extend %heading;
    font-size: 4rem;
    font-style: italic;
    line-height: 1;

    &--light { color: $color-grey-light-1; }
    &--dark { color: $color-grey-dark-1; }
}

.heading-3 {
    @extend %heading;
    font-size: 1.6rem;
    color: $color-primary;
    text-transform: uppercase;
}

.heading-4 {
    @extend %heading;
    font-size: 1.9rem;

    &--light { color: $color-grey-light-1; }
    &--dark { color: $color-grey-dark-1; }
}

.btn {
    background-color: $color-primary;
    color: #fff;
    border: none;
    border-radius: 0;
    font-family: $font-display;
    font-size: 1.5rem;
    text-transform: uppercase;
    padding: 1.8rem 3rem;
    cursor: pointer;
    transition: all .2s;

    &:hover {
        background-color: $color-primary-dark;
    }
}

.mb-sm { margin-bottom: 2rem; }
.mb-md { margin-bottom: 3rem; }
.mb-lg { margin-bottom: 4rem; }
.mb-hg { margin-bottom: 8rem; }