// Credits Page
.credits {
    // padding: 160px 0;

    // Intro Section
    &__heading {
        overflow: hidden;
        margin: 56px 0 72px;
        color: $color-tertiary;
        text-align: center;

        @include bp (sm) {
            margin: 160px 0 72px;
        }

        // Text
        p {
            max-width: 320px;
            margin: 50px auto 0;
            font-weight: 200;

            @include bp (sm) {
                margin: 72px auto 0;
                max-width: 450px;
            }
        }
    }

    // List
    &__list {
        padding-bottom: 96px;

        @include bp (sm, max) {
            text-align: center;
        }
    }

    &__category {
        display: block;
        border-top: 1px solid $color-tertiary;
        padding-top: 32px;

        @include bp (sm) {
            display: grid;
            --columns: 18;
            grid-column: 4 / span var(--columns);
            padding-top: 48px;
        }

        h2 {
            font-size: rem(24px);
            line-height: 1;

            @include bp (sm) {
                grid-column: span 8;
                font-size: rem(28px);
            }
        }

        & > ul {
            margin: 24px 0 56px;

            @include bp (sm) {
                grid-column: 11 / span 8;
                margin: 0 0 72px 0;
                padding: 0;
                font-size: rem(28px);
            }

            & > li {
                display: block;
                margin-bottom: 32px;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }

        a {
            color: $color-tertiary;
            text-decoration: none;
            transition: color 0.2s;
        }
        h3 {
            font-size: rem(24px);
            font-family: $font-serif;

            @include bp (sm) {
                font-size: rem(28px);
            }
        }
        dt {
            line-height: 1;

            a:hover {
                color: $color-secondary;
            }
        }
        dd {
            margin-top: 6px;
            font-size: rem(14px);

            @include bp (sm) {
                font-size: rem(16px);
            }

            &, a {
                color: rgba($color-tertiary, 0.6);
            }
            a:hover {
                color: #fff;
            }
            li {
                display: inline-block;
                line-height: 1.5;

                &:after {
                    display: inline-block;
                    content: "•";
                    margin: 0 0.35em 0 0.15em;
                }

                &:last-child:after {
                    display: none;
                }
            }
        }
    }
}