@layer components {
    .ui-action-tile {
        --tile-padding: var(--spaceing) var(--spaceing-md);
        --tile-gap: var(--spaceing);
        --tile-bg: var(--bg-color);
        --tile-fg: var(--text-color);
        --tile-border-width: var(--border-width);
        --tile-border-color: var(--border-color);
        --tile-radius: var(--rounded);
        --tile-media-padding: var(--spaceing-md);

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        gap: var(--tile-gap);
        inline-size: 100%;
        padding: var(--tile-padding);

        background: var(--tile-bg);
        color: var(--tile-fg);
        border: var(--tile-border-width) solid var(--tile-border-color);
        border-radius: var(--tile-radius);

        text-decoration: none;
        cursor: pointer;
        user-select: none;

        &.framed {
            outline: 1px solid var(--tile-border-color);
            outline-offset: var(--spaceing-sm);
        }

        .media {
            flex: 1 1 auto;
            display: grid;
            place-items: center;
            padding: var(--tile-media-padding);
        }

        .image {
            object-fit: contain;
        }

        .content {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .action {
            display: grid;
            place-items: center;
        }
    }
}