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
                @include meta
    picture
        display: block
        margin-left: half(-$grid-gutter-sm)
        margin-right: half(-$grid-gutter-sm)

    @include in-page-with-sidebar
        picture
            margin-left: 0
            margin-right: -$grid-gutter
        img
            max-height: $block-image-max-height-with-sidebar
            width: auto
    @include in-page-without-sidebar
        @include media-breakpoint-up(desktop)
            figure
                img
                    max-height: $block-image-max-height-without-sidebar
                    // max-height: calc(100vh - var(--header-height))
                    width: auto
                    max-width: 100%
            &.image-portrait, &.image-square
                .block-content
                    position: relative
                    .top
                        position: absolute
                        width: col(5)
                figure
                    display: flex
                    align-items: flex-end
                    > a 
                        width: col(7)
                        margin-left: half($grid-gutter)
                        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
            &.image-landscape
                picture
                    margin-left: -$grid-gutter
                    margin-right: -$grid-gutter
                    @media screen and (min-width: 1400px)
                        margin-left: 0
                        margin-right: 0
                figcaption
                    display: flex
                    justify-content: space-between
                    align-items: baseline
                    *
                        flex: 1 1
                    .credit
                        margin-top: 0
                        text-align: right