@import "../default_config"

.ImageBlock

    clear: both
    max-width: $proof-entry-column_width--main
    width: 100%

    &.-column_position--inset
        max-width: $proof-entry-column_width--text
    &.-column_position--outset
        &.-size--small
            ._Content
                width: calc((100% - #{ $proof-entry-column_width--text }) / 2 )


    &.-pinned
        // Create a "curtains" effect when there is more than one pinned
        // image in a row
        & + &.-pinned
            margin-top: -1 * $proof-entry-margin

        max-width: none
        ._Content
            max-width: none

        ._Image
            background-position : center center
            background-repeat   : no-repeat
            background-size     : cover   
            height              : 100vh

    ._Content
        width           : 100%
        float           : none
        margin-left     : 0
        margin-right    : 0
        margin-bottom   : $proof-entry-margin
        max-width       : none

    ._CaptionText
        display: block
    ._Credit
        display: block

    ._ImageLink
        display: block

    ._Image
        // Without this, the Captions won't end up flush even with no spaces in
        // the markup.
        display: block
        width: 100%

@media (min-width: $break-medium + 1px)
    .ImageBlock.-pinned ._Image
        background-attachment: fixed

@media (min-width: $break-extra_small + 1)

    .ImageBlock

        &.-position--left
            ._Content
                float: left
                margin-right: $proof-entry-margin

        &.-position--right
            ._Content
                float: right
                margin-left: $proof-entry-margin
    
        &.-size--small
            &.-position--center,
            ._Content
                max-width: $proof-entry-column_width--main / 4 - $proof-entry-body_padding

        &.-size--medium
            &.-position--center
                max-width: $proof-entry-column_width--text
            ._Content
                max-width: $proof-entry-column_width--text
            &.-position--right
                ._Content
                    width: 51%
                        // Not 50%, which, because of rounding, ends up being
                        // 1 pixel too narrow, resulting in a blurry image.
            &.-position--left
                ._Content
                    width: 51%

        &.-size--large
            &.-position--left
                ._Content
                    width: 100%
                    max-width: $proof-entry-column_width--main / 4 * 3
            &.-position--right
                ._Content
                    width: 100%
                    max-width: $proof-entry-column_width--main / 4 * 3
            &.-position--center
                ._Content
                    width: 100%
                    max-width: $proof-entry-column_width--main

        &.-size--full
            max-width: none
            ._Content
                width: 100%
                max-width: none
