image.sass

.block-image
    img
        display: block
        height: auto
        max-width: 100%
    figcaption
        margin-top: $spacing0
        p
            margin-bottom: 0
            margin-top: 0
            + .credit
                margin-top: $spacing0
        .credit
            p
                @extend .meta
    picture
        display: block
        margin-left: calc(-#{$grid-gutter-sm} / 2)
        margin-right: calc(-#{$grid-gutter-sm} / 2)


    @include in-page-with-sidebar
        @include media-breakpoint-up(md)
            picture
                margin-left: 0
                margin-right: -$grid-gutter
            img
                max-height: calc(100vh - var(--header-height))
                width: auto
    @include in-page-without-sidebar
        @include media-breakpoint-up(md)
            .block-content
                position: relative
                .top
                    position: absolute
                    width: col(5)
            figure
                display: flex
                align-items: flex-end
                > a 
                    width: col(7)
                    margin-left: calc(#{$grid-gutter} / 2)
                    display: block
                    order: 2
                picture
                    margin-left: 0
                    margin-right: -$grid-gutter
                figcaption
                    width: calc(#{col(5)} + #{$grid-gutter} / 2)
                    order: 1
                    display: block
                    text-align: right
                img
                    max-height: calc(100vh - var(--header-height))
                    width: auto