@include namespace('project') {
    @include store((
        --colors: (
            --bg: prop(--colors --bg-hi, $global: true),
        )
    ));

    @include component(namespace()) {
        position: relative;

        &::before {
            content:          '';
            display:          block;
            padding-bottom:   20em;
            background-color: prop(--colors --bg);
        }

        &::after {
            content:          '';
            background-image: linear-gradient(340deg, rgba(#000, .85) 5em, transparent 100%);
        }

        @include multi('element' 'picture', '&::after') {
            display:          block;
            position:         absolute;
            z-index:          10;
            top:              0;
            left:             0;
            width:            100%;
            height:           100%;
            object-fit:       cover;
            object-position:  center center;
        }

        @include element('card') {
            position:   absolute;
            z-index:    20;
            right:      1em;
            bottom:     1em;
            min-width:  15em;
            box-shadow: 0 .3em 1em rgba(#000, .5);
        }

        @include media('<=sm') {
            &::after {
                background-image: linear-gradient(to top, rgba(#000, .85) 5em, transparent 100%);
            }

            @include element('card') {
                left:      1em;
                min-width: 0;
            }
        }
    }
}