@layer components {
    .card {
        --card-background: var(--secondary-system-background);
        --container-padding-inline-start: 1rem;
        --container-padding-inline-end: 1rem;

        background-color: var(--card-background);
        border-radius: var(--inset-radius);
        color: inherit;
        display: block;
        font-weight: inherit;
        padding: 1rem;
        text-decoration: none;

        &.card--style-inset {
            margin-inline: calc(
                    var(--safe-area-inline-start) + var(--edge-spacing-inline)
                )
                calc(var(--safe-area-inline-end) + var(--edge-spacing-inline));
        }

        & .card {
            --card-background: var(--tertiary-system-background);

            border-radius: max(0.375rem, calc(var(--inset-radius) - 1rem));
        }
    }

    .background--grouped .card {
        --card-background: var(--secondary-system-grouped-background);

        & .card {
            --card-background: var(--tertiary-system-grouped-background);
        }
    }

    .card__title {
        font-size: var(--font-size-headline);
        font-weight: 600;
        margin-block-end: 0.5rem;
    }

    a.card {
        cursor: pointer;
        transition: background-image 0.125s ease;

        &:hover {
            background-image: linear-gradient(
                var(--quaternary-system-fill),
                var(--quaternary-system-fill)
            );
        }

        &:active {
            background-image: linear-gradient(
                var(--tertiary-system-fill),
                var(--tertiary-system-fill)
            );
        }

        &:focus-visible {
            outline: 0.1875rem solid var(--tint);
            outline-offset: 0.125rem;
        }
    }

    @media (pointer: fine) and (not ((min-width: 120rem) and (display-mode: fullscreen))) {
        .app .card {
            --container-padding-inline-start: 0.75rem;
            --container-padding-inline-end: 0.75rem;

            box-shadow: inset 0 0 0 1px var(--hairline);
            padding: 0.75rem;
        }
    }
}