.TimelineCard {
    display: flex;
    align-items: center;
    gap: var(--padding-default);
    border: 1px solid var(--color-light);
    border-radius: var(--radius-default);
    padding: var(--padding-xs);

    & > .icon {
        flex: 0 0 25%;
        font-size: var(--font-size-xxl);
        color: var(--color-main-dark);
    }

    & .text {
        text-align: left;
        flex-grow: 1;
    }

    & .state {
        --color: var(--color-darkest);
        display: flex;
        align-items: center;
        gap: var(--padding-xxs);
        margin-top: var(--padding-s);
        color: var(--color);
    }
}