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

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

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

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

        &:link,
        &:visited {
            &:hover {
                @include element('picture') {
                    opacity: .75;
                }

                @include element('card') {
                    transform: translateY(-1em);
                }
            }
        }

        @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;
            max-width:  calc(100% - 2em);
            transform:  translateY(0);
            transition: transform .2s;
            box-shadow: 0 .3em 1em rgba(#000, .25);
        }

        @include element('picture') {
            transition: opacity .2s;
            opacity:    1;
        }

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