.card {
    --animate-t: 0.2s;
    --animate-f: cubic-bezier(0, 0, .2, 1);
    --clr-bg: var(--clr-surface);
    --clr-fg: var(--clr-text);

    border-radius: var(--space-s);

    padding: var(--space-m);

    background-color: var(--clr-bg);
    color: var(--clr-fg);
    position: relative;

    transition: scale var(--animate-t) var(--animate-f);

    &:hover,
    &:focus,
    &:focus-visible,
    &:focus-within {
        --clr-bg: var(--clr-muted);
    }

    & a {
        color: inherit;
        display: flex;
        flex-direction: column;
        height: 100%;
        text-decoration: none;

        &:hover,
        &:focus,
        &:focus-visible {
            color: inherit;
            outline: unset;
        }

        & p {
            margin-top: var(--space-xs);
        }

        & div {
            margin-block-start: auto;
            padding-block-start: var(--space-m);

            color: var(--clr-subtle);
        }

        &::after {
            content: '';
            position: absolute;
            inset: 0;
        }
    }
}
