@layer components {
    .spell {
        display: flex;
        grid-gap: var(--space-xs);
    }

    .spell__detail {
        flex: 1;
    }

    .spell__time {
        font-size: 0.9em;
        color: var(--color-foreground-secondary);
        inline-size: 20ch;
        text-align: end;
    }

    .spell__dur {
        padding-inline: var(--space-xs);
        box-shadow: var(--shadow-md);
    }
}