chapter.sass

.block-chapter
    p:last-child
        margin-bottom: 0
    .notes
        margin-top: $spacing1
        *
            @include small
        sub, sup
            font-size: 60%
            margin-left: 0
    picture, img
        display: block
    figcaption
        @include small
        margin-top: 0.5rem
    .chapter
        flex-direction: column
        display: flex
        .text
            order: 2
        figure
            margin-bottom: $spacing1
    &--alt_background
        background: $block-chapter-layout-alt-background
        .block-content
            color: $block-chapter-layout-alt-color
    &--accent_background
        background: $block-chapter-layout-accent-background
        .block-content
            color: $block-chapter-layout-accent-color
            a
                @include link($block-chapter-layout-accent-color)

    @include media-breakpoint-down(desktop)
        &--alt_background, &--accent_background
            padding-top: $grid-gutter
            padding-bottom: $grid-gutter

        &--with-image
            &.block-chapter--alt_background, &.block-chapter--accent_background
                padding-top: half($grid-gutter-sm)

    @include in-page-with-sidebar
        figure
            max-width: col(6, 8)
            &.image-portrait,
            &.image-square
                max-width: col(4, 8)
        &--alt_background, &--accent_background
            background: none
            padding-bottom: 0
            padding-top: 0
            .chapter .text
                padding: $grid-gutter
            figure
                margin-bottom: 0
                figcaption
                    padding-left: $grid-gutter

        &--alt_background
            .chapter
                background: $block-chapter-layout-alt-background
        &--accent_background
            .chapter
                background: $block-chapter-layout-accent-background

    @include in-page-without-sidebar
        &--alt_background, &--accent_background
            padding-top: $grid-gutter
            padding-bottom: $grid-gutter
            margin-bottom: 0
        .chapter
            flex-direction: row
            .text
                order: 0
                width: col(7)
            figure
                width: col(4)
                margin-left: col-offset(1)
                margin-bottom: 0
                text-align: right
                img
                    margin-left: auto