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

    @include component(namespace()) {
        position:   relative;
        overflow:   hidden;
        box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);

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

        &:link,
        &:visited {
            color:           currentColor;
            text-decoration: none;

            &:hover,
            &:focus {
                @include element('picture') {
                    opacity: .75;
                    filter:  blur(0);
                }

                @include element('card') {
                    transform:        translateY(#{prop(--card --dims --hover-offset, $global: true)});
                    background-color: prop(--card --colors --hover --bg, $global: true);
                    color:            prop(--card --colors --hover --fg, $global: true);

                    * {
                        color: currentColor;
                    }
                }
            }
        }

        @include element('picture') {
            display:         block;
            position:        absolute;
            z-index:         10;
            top:             0;
            left:            0;
            width:           100%;
            height:          100%;
            object-fit:      cover;
            object-position: center center;
            transition:      opacity .2s;
            mask-image:      iro-easing-gradient(linear, 340deg, rgba(#000, .75) 7em, ease, #000 26em);
        }

        @include element('card') {
            position:  absolute;
            z-index:   20;
            right:     1em;
            bottom:    1em;
            min-width: 15em;
            max-width: calc(100% - 2em);
        }
    }
}