.entry-media-row-03 {
    > .g1-row-inner {
        max-width: none;

        > .g1-column {
            padding-#{$left}: 0;
            padding-#{$right}: 0;
        }
    }

    > .g1-row-background {
        > .g1-row-background-media {
            top: 0;
            bottom: auto;
            height: 400px;
        }
    }

    .g1-row-1 {
        height: 400px;
        padding-top: 10px;
        padding-bottom: 10px;
        margin: 0 auto;

        // Small gradient to add some bg/text contrast.
        > .g1-row-background {
            background-color: transparent;
            @include background-image(linear-gradient(to bottom, rgba(0,0,0, 0.333), rgba(0,0,0, 0.0) 60px));
        }
    }

    .g1-row-2 {
        margin: 0 auto;

        &:after {
            display: table;
            clear: both;
            content: "";
        }
    }

    .entry-before-title {
        display: flex;
        align-items: flex-end;

        position: absolute;
        #{$left}: 0;
        #{$right}: 10px;
        bottom: 100%;
    }

    .entry-flags {
        margin-#{$left}: auto;
        margin-bottom: 0;
    }

    .entry-header {
        padding-top: 1.5rem;
    }

    h1, h2 {
        color: #fff;
    }

    .entry-media-credit {
        padding: 0.333em 0;
    }
}

@media only screen and ( max-width: $mobile_breakpoint ) {
    .entry-media-row-03 {
        .g1-row-2 {
            background: $skin_dark_background_color;
        }
    }
}

@media only screen and ( min-width: $mobile_breakpoint + 1px ) {
    .entry-media-row-03 {
        > .g1-row-inner {
            min-height: 66vh;

            > .g1-column {
                position: static;
            }
        }

        > .g1-row-background {
            > .g1-row-background-media {
                top: 0;
                bottom: 0;
                height: auto;
            }
        }

        .g1-row-2 {
            position: absolute;
            z-index: 2;
            #{$left}: 0;
            #{$right}: 0;
            top: auto;
            bottom: 0;

            .g1-column-2of3 {
                width: calc( 66.666% + 45px );
            }

            .g1-column-1of3 {
                width: calc( 33.333% - 45px - 15px );

                position: absolute;
                z-index: 3;
                bottom: 0;
                #{$left}: auto;
                #{$right}: 15px;

                text-align: $right;

                background-color: rgba(0, 0, 0, 0.333);
                color: #fff;
            }

            > .g1-row-background {
                background-color: transparent;
                @include background-image(linear-gradient(to bottom, rgba(0,0,0, 0), rgba(0,0,0, 0.666)));
            }
        }
    }
}
