details {
    > div {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }

    /* TODO de-dupe this CSS with golfer/cheevos */
    > summary {
        background: var(--background);
        border: 0;
        color: var(--color);
        font-size: 1.5rem;
        font-weight: bold;
        padding: 1rem 0;
        position: sticky;
        top: 2.75rem;
        z-index: 1;

        &:hover { background: var(--background) !important }
    }
}

main {
    gap: 0;
    padding-top: 0;
}

.card {
    align-items: center;
    gap: .5rem .25rem;
    grid-template: min-content / min-content min-content 1fr min-content min-content;

    > h2 {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        gap: .5rem;
        line-height: 1.25;

        > span {
            display: inline;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0;
        }
    }

    svg {
        height: 1rem;
        justify-self: center;
        width: 1rem;
    }
}
