@layer components {
    .tile {
        display: grid;
        place-items: center;
        --tile-size: calc(var(--icon-size) + 0.25rem);
        inline-size: var(--tile-size);
        block-size: var(--tile-size);
        border-radius: calc(var(--tile-size) / 4);
        background-color: var(--system-gray);
        color: oklch(100% 0 0deg);
    }

    /* A tile can also hold a picture, such as an app's own icon, or a
       glyph such as initials, sized like an avatar's. */
    .tile {
        font-size: calc(var(--tile-size) * 0.4);
        font-weight: 600;
        overflow: hidden;
    }

    .tile > img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
    }

    .tile > svg {
        inline-size: calc(var(--tile-size) * 0.6857);
        block-size: calc(var(--tile-size) * 0.6857);
    }

    /* Without a size a tile matches the row's icon; the sizes step evenly,
       as an avatar's do, for a larger icon on a detail page. */
    .tile--size-small {
        --tile-size: 1.75rem;
    }

    .tile--size-normal {
        --tile-size: 2.5rem;
    }

    .tile--size-large {
        --tile-size: 3.25rem;
    }

    @media (pointer: fine) and (not ((min-width: 120rem) and (display-mode: fullscreen))) {
        .app .tile--size-normal {
            --tile-size: 2rem;
        }
    }
}