typography {
    & > header {
        background: #F4F4F4;
    }

    h1,
    h5 {
        color: $carnation;
    }

    & > section {
        & > h2 {
            margin-top: 50px;
        }
    }

    article {
        &.principles {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 35px 0;

            div {
            }

            img {
                margin: 0 auto;
            }
        }

        &.line-height {
            div {
                margin: 35px 0;
            }
        }

        &.line-length {
            div {
                .ruler {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    flex-direction: row;
                    width: 100%;

                    > * {
                        display: inline-block;
                        margin: 0;
                    }

                    hr {
                        height: 2px;
                        background: $light;
                        border: none;
                    }

                    span {
                        padding: 10px;
                        border: 2px solid $carnation;
                        border-radius: 6px;
                        margin-right: 10px;
                    }
                }

                &.too-short {
                    margin: 35px 0;

                    .ruler {
                        hr {
                            width: 14em;
                        }
                    }
                }

                &.just-right {
                    margin: 35px 0;

                    .ruler {
                        hr {
                            width: 33em;
                        }

                        span {
                            background: $carnation;
                            color: #fff;
                            border: 2px solid darken($carnation, 5%);
                        }
                    }
                }

                &.too-long {
                    margin: 35px 0;

                    .ruler {
                        hr {
                            width: 80em;
                        }

                        span {
                            margin-right: 40px;
                        }

                        p {
                            text-indent: -10px;
                        }
                    }
                }
            }
        }
    }

    .example {
        padding: 20px;

        div.type-group {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            border-bottom: 2px solid #f1f1f1;
            padding: 15px;
            overflow: hidden;

            h1,
            h2,
            h3,
            h4,
            h6,
            p {
                color: inherit;
            }

            h5 {
                color: rgba(0, 0, 0, 0.55);
            }

            span {
                margin: 5px 0;
                opacity: 0.65;
            }
        }

        hr {
            border: none;
            height: 1px;
            background: #f4f4f4;
            display: block;
        }
    }
}