$textBlockSPacing: 38;

h1,
h2,
h3,
h4 {
    font-family: $fontFamily--sans;
    line-height: 1.2;
}

h1 {
    margin: 0 0 rem(50);
    color: $purple--dark;

    @include heading-border;
    @include breakpoint(small) {
        font-size: rem(60);
    }
}

h2 {
    font-size: rem(36);
    margin: rem(70) 0 rem(4);
}

h3,
h4 {
    margin-bottom: rem(4);
}

h4 {
    @include breakpoint(small) {
        margin-top: rem(48);
        font-size: rem(20);
    }
}

p,
pre {
    margin: 0 0 rem($textBlockSPacing);
}

p {
    @include hyphens(auto);
}

a {
    color: $black;
    text-decoration: none;

    &:hover {
        color: $purple--light;
    }
}

blockquote {
    margin: rem($textBlockSPacing) 0;
    padding: rem(1) rem(10) rem(1) rem(22);

    border-left: 4px solid $grey--lightest;
    background: #f8f8f8;

    font-style: italic;

    @include breakpoint(small) {
        font-size: rem(22);
    }

    > p {
        margin: rem(18) 0;
    }
}

ul {
    margin: rem($textBlockSPacing) 0;
}

li {
    > p:last-child {
        margin-bottom: 0;
    }
}