.twz-card-project {
    --card-project-media-height: 32.4rem;
    --card-project-content-gap: 0.7rem;
    --card-project-category-color: var(--green-500, #5aad5a);
    --card-project-title-color: var(--white, #fff);
    --card-project-image-scale: 1;

    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.9rem;
    color: inherit;

    .twz-card-project__media {
        position: relative;
        flex: 1 1 var(--card-project-media-height);
        block-size: var(--card-project-media-height);
        overflow: clip;

        img {
            -o-object-fit: cover;
               object-fit: cover;
        }
    }

    .twz-card-project__image {
        width: 100%;
        block-size: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        -o-object-position: center;
           object-position: center;
        scale: var(--card-project-image-scale);
        transform-origin: center;
        transition: scale .8s ease;

        @media (prefers-reduced-motion: reduce) {
            transition: none;
        }
    }

    .twz-card-project__content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--card-project-content-gap);

        .icon-wrap {
            width: 5rem;
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            place-content: center;
            border: 1px solid var(--white);
            translate: -2rem 0;
            opacity: 0;
            transition: translate 0.35s, opacity 0.35s;

            svg {
                opacity: 0;
                translate: -0.5rem 0;
                transition: .35s ease translate .1s, opacity .35s .1s;
            }
        }
    }

    .twz-card-project__category {
        margin: 0;
        font-family: var(--font-base);
        font-size: var(--fs-p);
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.1rem;
        text-transform: uppercase;
        color: var(--card-project-category-color);
    }

    .twz-card-project__title {
        position: relative;
        width: -moz-fit-content;
        width: fit-content;
        margin: .25em 0 0;
        font-family: var(--font-special);
        font-size: var(--fs-32, 3.2rem);
        font-weight: 600;
        line-height: 1.1;
        text-transform: uppercase;
        color: var(--card-project-title-color);
    }

    &:is(:hover, :has(.full-link:focus-visible)) {
        --card-project-image-scale: 1.25;

        .icon-wrap {
            translate: 0 0;
            opacity: 1;

            svg {
                opacity: 1;
                translate: 0 0;
            }
        }
    }
}