.card {
    --elevation: var(--elevation-lowest);

    --palette-background-normal: var(--palette-auto-off-normal);
    --palette-foreground-normal: var(--palette-inverse-normal);

    @apply flex flex-col;

    border-radius: var(--radius-small);

    transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    & > figure {
        @apply m-0 rounded-[inherit];

        &:first-child > * {
            @apply rounded-t-[inherit];
        }

        &:last-child > * {
            @apply rounded-b-[inherit];
        }
    }

    & > footer {
        @apply justify-end;

        &:not(:first-child) {
            @apply pt-[var(--spacing-root-large)];
        }
    }

    & > header {
        @apply font-bold leading-[var(--font-content-line-height-large)];

        font-size: var(--font-content-size-large);

        &:first-child {
            @apply pb-[var(--spacing-root-medium)];
        }

        &:not(:first-child) {
            @apply pt-[var(--spacing-root-medium)];
        }
    }

    & > section {
        &:not(:first-child) {
            @apply pt-[var(--spacing-root-small)];
        }

        &:last-of-type {
            @apply flex-grow;
        }
    }

    & > :is(header, footer) {
        @apply flex gap-[var(--spacing-root-small)] items-center;
    }

    & > :is(footer, header, section) {
        &:first-child {
            @apply rounded-t-[inherit];
        }

        &:last-child {
            @apply rounded-b-[inherit];
        }
    }

    &:not([data-variation]) {
        @apply bg-[rgb(var(--palette-background-normal))] text-[rgb(var(--palette-foreground-normal))];

        box-shadow: var(--elevation);

        & > :is(footer, header, section) {
            @apply border-l-2 border-r-2 border-solid px-[var(--spacing-root-large)];

            border-color: rgba(var(--palette-inverse-off-lightest), theme("opacity.10"));

            &:first-child {
                @apply border-t-2 pt-[var(--spacing-root-medium)];
            }

            &:last-child {
                @apply border-b-2 pb-[var(--spacing-root-medium)];
            }
        }
    }
}